不要相信层叠——为什么我用 JavaScript 编写 CSS

如果你最近上网，你可能听说过 CSS-in-JS。

这项技术近来越来越受欢迎，但并非人人都喜欢它。今天，我想为大家揭开它的神秘面纱，并解释为什么我认为你应该使用它。

CSS-in-JS 可以指代多种含义，但主要是指在 JavaScript 中编写样式逻辑的技术。这可以通过将内联样式附加到 React 组件来实现，也可以通过利用Styled Components等工具来实现。

如果你和我一样，第一次听到“CSS-in-JS”这个词时，你可能会想：

哦不……又多了一件要学的东西！

不过我有个好消息：如果你已经掌握了 CSS，那就真的不需要学习任何新东西了。但是等等，如果你已经掌握了 CSS，那为什么还要费劲地用 JS 写 CSS 呢？这岂不是只会增加复杂性吗？

我为什么用 JS 编写 CSS 🎨

CSS 是层叠样式表的缩写。CSS 诞生之初，我们构建的网站以今天的标准来看通常都很简单。当时， CSS 的层叠特性非常实用。然而，如今我认为它带来的弊端远大于益处。想想看，你还记得上个项目里用到的所有类名吗？

现在想象一下你和几个人一起开发一个项目。编写的 CSS 样式与其他人的代码冲突或覆盖他人的样式几乎是不可避免的。BEM 和 SMCSS 等技术可以有所帮助，但你必须依赖所有开发人员遵守规则，而随着项目规模的扩大，出错的概率也会增加。

对我来说，CSS-in-JS 和 Styled Components 尤其能帮我避免犯错。API 而非约定俗成的方式保护我免受自身错误的困扰。CSS-in-JS 让我可以专注于 UI 样式设计，而无需担心在其他地方覆盖 CSS。

不过，层叠样式仍然有用。使用 Styled Components，你仍然可以利用层叠样式，但它仅限于你正在处理的组件的范围内。你可以鱼与熊掌兼得。

精彩表现🚀

好，假设你从不犯错。除了控制层叠样式之外，CSS-in-JS 还有其他好处吗？事实证明，它的确有。CSS-in-JS 库负责将样式注入到 DOM 中。它们可以跟踪哪些组件被渲染，并只注入所需的样式。

这意味着用户最终下载的代码字节数更少，首次绘制速度也更快。非常成功。

维护🔧

你是否曾经想从项目中移除某些 CSS 代码，却又无法确定它们是否还在其他地方被使用？有了 CSS-in-JS，这通常就不是问题了，因为样式通常与依赖它们的组件位于同一位置。你再也不用费力地去查找影响你正在处理的组件的 CSS 代码了。

动态样式

使用 CSS-in-JS 的另一个好处是可以充分利用 JavaScript 的强大功能。你可以使用函数创建 mixin 和可重用的样式模块，使用 props 创建组件的变体，并使用变量实现主题化。

大多数 CSS-in-JS 工具也具备传统 CSS 预处理器的所有优点，包括嵌套规则和自动供应商前缀。

CSS-in-JS 的缺点是什么？

所有技术选择都涉及某种妥协，使用 CSS-in-JS 也不例外。使用 Styled Components 之类的工具的主要缺点是增加了复杂性。首先，它需要从 npm 安装。这虽然不是什么大问题，但毕竟多了一步。

如果你的代码是服务器端渲染的，那么你需要安装并配置一个 Babel 插件，以确保你的样式在首次加载时也能生效。

CSS-in-JS 的另一个缺点是它可能并不适用于你的特定应用程序。如果你没有使用 React 或 Vue 等前端框架，那么 CSS-in-JS 可能就不是最佳选择。

如果你觉得 CSS-in-JS 不太适合你的需求，我强烈推荐你试试Tailwind CSS。它是一个实用性优先的 CSS 框架，可以帮助你快速构建用户界面。虽然它无法提供 CSS-in-JS 的所有优势，但它可以帮助你避免 CSS 的一些陷阱。

结语

作为开发者，我们的工作是用代码解决问题。CSS-in-JS 是一款可以帮助我们更高效地解决问题并编写更易于维护的代码的工具。

如果你尝试过 CSS-in-JS 方案但效果不佳，那也没关系。选择最适合你和你的团队的方法。

如果您使用过 CSS-in-JS，请告诉我它为您解决了哪些问题/带来了哪些问题！