阅读 3135

[译] 为什么我用 JavaScript 来编写 CSS

三年来,我设计的 Web 应用程序都没有使用 .css 文件。作为替代,我用 JavaScript 编写了所有的 CSS。

我知道你在想什么:“为什么有人会用 JavaScript 编写 CSS 呢?!” 这篇文章我就来解答这个问题。

CSS-in-JS 长什么样?

开发者们已经创建了不同风格的 CSS-in-JS。迄今为止最受欢迎的,是我和他人共同开发的一个叫做 styled-components 的库,在 GitHub 上有超过 20,000 颗星。

如下是它与 React 一起使用的例子:

import styled from 'styled-components'

const Title = styled.h1`
  color: palevioletred;
  font-size: 18px;
`

const App = () => (
  <Title>Hello World!</Title>
)
复制代码

这会在 DOM 里渲染一个字体大小为 18px 的浅紫红色的 <h1>

为什么我喜欢 CSS-in-JS?

主要是 CSS-in-JS 增强了我的信心。我可以在不产生任何意外后果的情况下,添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。如果删除组件,我也会删除它的 CSS。不再是只增不减的样式表了! ✨

信心:在不产生任何意外后果的情况下,添加、更改和删除 CSS,并避免无用代码。

易维护:再也不需要寻找影响组件的 CSS 了。

尤其是我所在的团队从中获取了很大的信心。我不能指望所有团队成员,特别是初级成员,对 CSS 有着百科全书般的理解。最重要的是,截止日期还可能会影响质量。

使用 CSS-in-JS,我们会自动避开 CSS 常见的坑,比如类名冲突和权重大战(specificity wars)。这使我们的代码库整洁,并且开发更迅速。 😍

提升的团队合作:无论经验水平如何,都会避开 CSS 常见的坑,以保持代码库整洁,并且开发更迅速。

关于性能,CSS-in-JS 库跟踪我在页面上使用的组件,只将它们的样式注入 DOM 中。虽然我的 .js 包稍大,但我的用户下载了尽可能小的有效 CSS 内容,并避免了对 .css 文件的额外网络请求。

这导致交互时间稍微长一点,但是首次有效绘制却会快很多! 🏎💨

高性能:仅向用户发送关键 CSS 以快速进行首次绘制。

我还可以基于不同的状态(variant="primary" vs variant="secondary")或全局主题轻松调整组件的样式。当我动态更改该上下文时,该组件将自动应用正确的样式。 💅

动态样式:基于全局主题或不同状态设置组件样式。

CSS-in-JS 还提供 CSS 预处理器的所有重要功能。所有库都支持 auto-prefixing,JavaScript 原生提供了大多数其他功能,如 mixins(函数)和变量。


我知道你在想什么:“Max,你也可以通过其他工具或严格的流程或大量的培训来获得这些好处。是什么让 CSS-in-JS 变得特别?”

CSS-in-JS 将所有这些好处结合到一个好用的包中并强制执行它们。它引导我走向成功的关键:做正确的事情很容易,做错事很难(甚至不可能)。

谁在使用 CSS-in-JS?

有上千家公司在生产中使用 CSS-in-JS,包括 RedditPatreonTarget, AtlassianVogueGitHubCoinbase 等等。(包括本网站)

CSS-in-JS 适合你吗?

如果你使用 JavaScript 框架来构建包含组件的 Web 应用程序,那么 CSS-in-JS 可能非常适合。特别是你所在团队中每个人都理解基本的 JavaScript。

如果你不确定如何开始,我会建议你尝试一下 CSS-in-JS,亲眼看看它有多好! ✌️

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

关注下面的标签,发现更多相似文章
评论