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

啊，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布局！

动图