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

╰+攻爆jí腚メ 2024-05-02 20:08 58阅读 0赞

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

*挣扎是真的。*

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

### 1. 全局 CSS：Old School Cool ###

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

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

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

### 2. 模块化：分而治之 ###

NextJS 内置了对[CSS 模块的][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][CSS]或[WindiCSS）][WindiCSS]来让我们的生活更轻松？  
为由 IDE IntelliSense 支持的快速 UI 开发做好准备——不用再担心未使用的类，因为它们会自动清除！

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

### 6. 预建组件库：Bootstrap & Bulma ###

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

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

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

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

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

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

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

在推特上关注我，我每天都在那里发帖：[johnrushx][WindiCSS]

编码愉快！?

*  感谢 fireship 的视频，大部分是从[那里拍摄的][WindiCSS]

PS  
为什么网络开发人员离开餐厅？因为`table`布局！

动图

![ea5a71e2b0bc1858201ce587b69ad13b.gif][]

[CSS]: https://zhifj.com
[WindiCSS]: http://telegeram1.com
[ea5a71e2b0bc1858201ce587b69ad13b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/9838b9de4d694561ab99a7a966e4c485.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，58人围观）

还没有评论，来说两句吧...

相关阅读

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

因此，今天我们将深入探讨使用 NextJS 为 React 应用程序编写 CSS 的七种不同方法（如果这不是您的问题，请不要担心；啊，Web 开发的世界——您可以从学习 ...

╰+攻爆jí腚メ/ 2024年05月02日 20:08/ 0 赞/ 59 阅读

相关从未使用过的 Python 特性

1. 按步长取数知识点: list\[start:stop:step\] start: 开始索引, 默认为0 end: 结束索引, 默认为列表长度

港控/mmm°/ 2024年02月19日 11:40/ 0 赞/ 13 阅读

相关 CSS应用的三种方法

CSS样式代码必须保存在`.css`类型的文本文件中，或者放在网页内的<style>标签中，或者插在网页标签的style属性值中。CSS样式应用的方法主要包括4种：行内样式、

忘是亡心i/ 2023年03月12日 09:13/ 0 赞/ 7 阅读

相关 5种css隐藏元素的方法_在CSS中隐藏元素的10种方法

5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the

柔情只为你懂/ 2022年12月03日 01:38/ 0 赞/ 273 阅读

相关巨人的阴影之下：爱因斯坦的科学家妻子从未实现过梦想……

> 全文共5406字，预计学习时长14分钟 ![4bf482fabd284644a850a3b3a72be467.png][] 1912年的米列娃·爱因斯坦和阿尔伯特

「爱情、让人受尽委屈。」/ 2022年11月12日 02:45/ 0 赞/ 223 阅读

相关 4个你从未听说过的强大JavaScript运算符

![770d930a21a6df8b5b00ed95b047d45a.png][] 英文 | https://javascript.plainenglish.io/4-pow

我就是我/ 2022年09月04日 12:46/ 0 赞/ 239 阅读

相关 Package Control安装插件失败的一种尝试方法

当前使用的SublimeText3版本是3.3114 ![Center][] 使用Package Control安装插件失败，控制台抛出以下异常： Pac

浅浅的花香味﹌/ 2022年07月21日 01:29/ 0 赞/ 174 阅读

相关当类型过多时的处理方法

写代码时都会遇到这种情况,就是某种状态会分很多种的情况,这是不要把分类写到代码里面.而是要新建一个类型表,把每一种状态分类,进行标记按照阿拉伯数字或者字母都可以,分别记录状态,

Love The Way You Lie/ 2022年05月29日 10:23/ 0 赞/ 122 阅读

相关 Centos7 cache/buff过高处理方法

当linux运行久点，会产生很多不必要的cache或者buff,导致占用太多的内存，其实这可以手动去释放它。 [root@DD-Server-9F ~] fre

ゝ一纸荒年。/ 2021年11月08日 23:14/ 0 赞/ 1044 阅读

相关 css溢出文本处理的几种方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2021年09月14日 07:48/ 0 赞/ 395 阅读