从未尝试过的 7 种处理 CSS 的方法

news2024/11/7 22:41:06

啊,Web 开发的世界——您可以从学习 HTML、JavaScript,当然还有 CSS 等基础知识开始。
但是一旦你在现实世界中构建应用程序,纯 CSS 就不再适用了。

挣扎是真的。

因此,今天我们将深入探讨使用 NextJS 为 React 应用程序编写 CSS 的七种不同方法(如果这不是您的问题,请不要担心;这些概念也适用于其他地方)。
系好安全带,准备好进行权衡取舍!

1. 全局 CSS:Old School Cool

我们可以创建适用于我们整个应用程序的全局 CSS。
它有效……但只有当事情又小又简单的时候。
随着项目的增长,由于级联样式表的方式,命名事物变得更加困难。

您可能会发现自己遵循 BEM(块元素修饰符)之类的命名约定,但说实话 - 没有人喜欢完美地做到这一点。

不要忘记加载时间!更大的包大小等于更慢的应用程序加载——不是没有人有时间这样做。

2. 模块化:分而治之

NextJS 内置了对CSS 模块的支持,它允许你在单个组件中本地化你的样式,而不用担心名称冲突或搞乱代码库的其他部分。

作为一个额外的好处,这有助于减少包的大小,因为 NextJS 确切地知道每个组件需要什么样式。

专业提示composes如果需要在多个组件之间共享,您甚至可以使用另一个模块的属性!

3. 预处理器:Sassier 样式表

当我们有 SCSS、Less 和 Stylus 等预处理器时,为什么还要坚持使用普通的香草呢?
这些坏小子让你用更高级的特性编写 CSS,比如变量、mixins 和函数。

动图

还觉得时髦吗?

您只需要在 NextJS 中安装 Sass 编译器并相应地更改您的文件名。
其余的在幕后神奇地发生。

4. 样式化 JSX:JavaScript + CSS = ❤️

进入带有样式组件、情感、JSS Style Tron(不胜枚举!)等实用程序库的样式组件的全新世界。
它们都有一个共同点——直接在 JavaScript 代码中编写 CSS!

Styled JSX 内置于 NextJS 中;只需使用该属性在组件内打开一个样式标签jsx
现在您可以根据状态变化动态更改样式——这有多酷?

5.实用类:微风造型的Tailwind和Windy

为什么不通过导入实用程序类库(如Tailwind或WindiCSS)来让我们的生活更轻松?
为由 IDE IntelliSense 支持的快速 UI 开发做好准备——不用再担心未使用的类,因为它们会自动清除!

 

请记住,这种方法可能需要预先设置一些额外的工具,如果组织不当,可能会导致组件 HTML 代码混乱。

6. 预建组件库:Bootstrap & Bulma

或者您可能更喜欢来自Bootstrap或Bulma等流行框架的预构建组件?
这些为按钮、卡片等提供了现成的样式——只需将它们从 Node 模块导入到您的项目中!

不足之处?与 Tailwind 相比,这里没有太多定制,而且由于未使用的类,包大小可能更大。

7. React 组件库:固执己见的一群人

如果您只关心组件库,请查看Mantine、ant、Material UI、Rebase、Chakra 和 Tomagui 等选项!
这些不仅可以处理您的 CSS,还可以为 JavaScript 提供广泛的实用程序(想想钩子和 API)。

请记住,这些库在其设计选择中可能会自以为是,因此请选择适合您口味的库!

您在此处的选择将塑造您的应用程序的外观和感觉。

好了——在 React 中处理 CSS 的七种不同方法!根据需要混合搭配这些技巧,或者坚持使用最适合您的技巧。

在推特上关注我,我每天都在那里发帖:johnrushx

编码愉快!🚀

  • 感谢 fireship 的视频,大部分是从那里拍摄的

PS
为什么网络开发人员离开餐厅?因为table布局!

动图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624632.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NLP与GPT联合碰撞:大模型与小模型联合发力

目录标题 NLP是什么东西?Al大小模型联合发力 NLP是自然语言处理,而GPT是自然语言生成模型。 它们的联合碰撞结果是大模型与小模型联合发力,是因为大模型可以提供更好的语言理解和生成能力,而小模型则可以更快地进行推理和预测。 …

考虑微网新能源经济消纳的共享储能优化配置(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【剑指offer专项突破版】字符串篇——“C“

前言 剑指offer专项突破版(力扣官网)——> 点击进入 本文所属专栏——>点击进入 一.字符串中的变位词 题目分析 总结 要求——在字符串2中找到字符串的1的排列顺序之一 数据格式——仅包含小写字母——哈希表! 返回值——bool值 思路分…

国产数据库有哪些?关键行业数据库为何一定要国产化?

国产数据库主要有以下几种: 1. 中国数据库(ChinaDB):由中国科学院计算技术研究所开发的关系型数据库系统。 2. 华为GaussDB(高斯数据库):国内首个软硬协同、全栈自主的国产数据库GaussDB&…

操作系统-内存管理-内存管理

目录 一、内存概念 1.1程序的链接 静态链接 装入时动态链接 运行时动态链接 1.2 程序的装入 绝对装入 可重定位装入(静态重定位) 动态运行时装入(动态重定位) 1.3内存空间的扩充 1.3.1覆盖 1.3.2交换技术 1.4连续管理分配管理方式 1.4.1单一连续分配 1.4.2固定分区分…

设计师必备!Axure RP10汉化版下载,一站式工具满足所有需求!

Axure RP10 汉化版是一款全新的原型、设计、交付工具,它兼容 Axure、Figma、Sketch 和 Adobe XD 等格式,提供一站式协同设计,帮助团队高效工作。在本文中,我们将为你介绍 Axure RP10 汉化版即时设计的下载和安装步骤,让…

c++学习——多态

多态 **多态的语法****多态的底层原理图****多态案1——计算机类****纯虚函数和抽象类****多态案例2——饮品****虚析构和纯虚析构****多态案例3—— 电脑组装** 多态是C面向对象三大特性之一 多态分为两类 静态多态:函数重载和运算符重载属于静态多态,复用函数名 动…

ssm本地上传文件

SSM实现图片本地上传并保存到本地磁盘中 功能描述 实现房屋租赁网站中添加房屋信息的功能。其中add.jsp页面是一个表单提交信息——添加房屋 首先输入房屋的相关信息,并上传房屋的图片。上传成功后会将图片的名字添加到数据库中成功后跳转到success.jsp&#xff…

华为OD机试 Java 实现【简单密码】【牛客练习题 HJ21】,附详细解题思路

一、题目描述 现在有一种密码变换算法。 九键手机键盘上的数字与字母的对应: 1--1, abc--2, def--3, ghi--4, jkl--5, mno--6, pqrs--7, tuv--8 wxyz--9, 0--0,把密码中出现的小写字母都变成九键键盘对应的数字,如:a …

【PaperReading】科学可重复的基因组富集: CERNO 与其他八种算法的比较

Gene set enrichment for reproducible science: comparison of CERNO and eight other algorithms 可重复性科学的基因组富集: CERNO 与其他八种算法的比较1. 引言2. 材料和方法2.1 CERNO算法2.2 进一步用于评估的算法2.3 数据集2.4 算法评估指标3. 结果3.1 CERNO算法的不同排…

【前端 - HTML】第 2 课 - HTML 标签

欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、标题标签 3、段落标签 4、文本格式化标签 5、图像标签 5.1、基本作用 5.2、属性 6、超链接标签 7、音频标…

STM32 FSMC机制

引 言 STM32是ST(意法半导体)公司推出的基于ARM内核Cortex-M3的32位微控制器系列。Cortex-M3内核是为低功耗和价格敏感的应用而专门设计的,具有突出的能效比和处理速度。通过采用Thumb-2高密度指令集,Cortex&#xff0…

五种I/O模型

一、I/O基本概念 I/O即数据的读取&#xff08;接收&#xff09;或写入&#xff08;发送&#xff09;操作 通常用户进程中的一个完整I/O分为两个阶段 (1)用户进程空间<-->内核空间 (2)内核空间<-->设备空间&#xff08;磁盘、网卡等&#xff09; I/O分为内存I/O、…

个人博客网站实现微信扫码登录(新)

前言 在不久之前&#xff08;两年前&#xff09;我写了一篇同名的博客《个人博客网站实现微信扫码登录&#xff08;附源码&#xff09;》&#xff0c;当时只是做一个记录而已。但是没想到会收到很多“猿友”的私聊&#xff0c;“代码跑不起来”、“实现原理”、“测试网址访问不…

[网鼎杯 2018]Fakebook1

拿到题目后是一个博客的界面&#xff0c;这里可以登录和注册 点入登录界面&#xff0c;猜测可能是sql注入 试了很多次&#xff0c;都不是&#xff0c;也没有回显报错&#xff0c;所以把目光放到了注册上面 注册的其他行数据&#xff0c;差不多都可以乱填&#xff0c;只有一个bl…

王道考研计算机网络第二章知识点汇总

2.1.1物理层基本概念 电气特性和功能特性易混淆&#xff0c;注意区分。电气特性一般指的是某个范围&#xff0c;功能特性一般指的是电平所代表的含义。 2.1.2数据通信基础知识 同步传输是指发送方和接收方节奏是统一的&#xff0c;数据之间是没有间隔的是一个一个的区块。在键…

轻松掌握Python自动化工具,解锁PyAutoGUI的强大功能

前言 PyAutoGUI是一个用于图像识别和鼠标/键盘控制的Python库。它提供了一组函数和方法&#xff0c;用于自动化屏幕上的鼠标移动、点击、拖拽和键盘输入&#xff0c;以及执行图像识别和处理。本文旨在帮助读者入门 PyAutoGUI&#xff0c;理解其基础概念和掌握最佳实践&#xff…

手把手教你实现—基于OpenCV的车流量统计和车速检测代码

本章将实现了一个简单的车辆速度估计和车流量统计的GUI应用&#xff0c;它使用了Haar级联检测器和相关跟踪器来检测和跟踪视频中的车辆&#xff0c;并通过图像处理和数学计算来估计车辆的速度。 1.首先&#xff0c;该代码需要cv2&#xff1a;用于图像处理和计算机视觉任务&…

软件测试(功能、接口、性能、自动化)详解

一、软件测试功能测试测试用例编写是软件测试的基本技能&#xff1b;也有很多人认为测试用例是软件测试的核心&#xff1b;软件测试中最重要的是设计和生成有效的测试用例&#xff1b;测试用例是测试工作的指导&#xff0c;是软件测试的必须遵守的准则。黑盒测试常见测试用例编…

比较18个3*6尺寸差值结构的迭代次数

已发现二值化差值结构有3种相互作用&#xff0c;纵向&#xff0c;横向和斜向。纵向相互作用只与行间距有关而与数值的数量无关&#xff0c;与迭代次数成反比&#xff1b;横向相互作用只与列的数值数量有关与列间距无关&#xff0c;与迭代次数成正比&#xff1b;斜向相互作用将导…