我为什么在 JavaScript 中写 CSS - 《前端精选》

What Does CSS-in-JS Look Like?
CSS-in-JS 长啥样？

For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript.

这三年来，我未用任何 .css 文件就完成了所有 web app 的样式设计。取而代之的是，我把所有的 CSS 都写在了 JavaScript 里。

I know what you are thinking: “why would anybody write CSS in JavaScript?!” Let me explain.

我知道你在想什么：“为什么有人会把 CSS 写在 JavaScript 里？！”，且听我慢慢道来。

What Does CSS-in-JS Look Like?

CSS-in-JS 长啥样？

Developers have created different flavors of CSS-in-JS. The most popular to date, with over 20,000 stars on GitHub, is a library I co-created, called styled-components.
开发者们创建了各式各样的 CSS-in-JS. 迄今为止最受欢迎的一个，在 GitHub 上有超过 20,000 个 star, 便是我也参与了共建的名为 styled-components 的库。

Using it with React looks like this:

它可搭配 React 使用：

import styled from 'styled-components'
const Title = styled.h1`
  color: palevioletred;
  font-size: 18px;
`
const App = () => (
  <Title>Hello World!</Title>
)

This renders a palevioletred <h1> with a font size of 18px to the DOM:

这会在 DOM 中渲染一个字体大小为 18px 的苍紫罗蓝色的 <h1> 标签：

Why I like CSS-in-JS

我为什么喜欢 CSS-in-JS

Primarily, CSS-in-JS boosts my confidence. I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets! ✨

主要是 CSS-in-JS 增强了我的信心。我可以新增，修改和删除 CSS 而不用担心产生任何意外后果。我对某个组件的样式更改不会影响到其他地方。删除组件的同时也会删除它的 CSS. 不会有多余的追加样式表！✨

Confidence: Add, change and delete CSS without any unexpected consequences and avoid dead code.

信心：新增，修改和删除 CSS 而不产生任何意外后果，并避免死代码。

Painless Maintenance: Never go on a hunt for CSS affecting your components ever again.

无痛维护：不再需要寻找影响组件的 CSS 了。

Teams I have been a member of are especially benefitting from this confidence boost. I cannot expect all team members, particularly juniors, to have an encyclopedic understanding of CSS. On top of that, deadlines can get in the way of quality.

我所在的 teams 尤其受益于这种信心的增强。我不能指望所有团队成员，特别是晚辈们，能对 CSS 有如百科全书般的理解。最重要的是，deadline 总会影响质量。

With CSS-in-JS, we automatically sidestep common CSS frustrations such as class name collisions and specificity wars. This keeps our codebase clean and lets us move quicker. 😍

有了 CSS-in-JS，我们会自动避开常见的 CSS 大坑，例如类名冲突和 specificity wars. 这使我们的代码库保持干净，让我们进展更快。😍

Enhanced Teamwork: Avoid common CSS frustrations to keep a neat codebase and moving quickly, regardless of experience levels.

团队合作紧密：无论经验水平如何，都可避免常见的 CSS 坑，以保持代码库整齐及进展迅速。

Regarding performance, CSS-in-JS libraries keep track of the components I use on a page and only inject their styles into the DOM. While my .js bundles are slightly heavier, my users download the smallest possible CSS payload and avoid extra network requests for .css files.

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

This leads to a marginally slower time to interactive, but a much quicker first meaningful paint! 🏎💨

这导致交互时间稍微慢了一些，但是首次有效绘制的时间要快得多！🏎💨

Fast Performance: Send only the critical CSS to the user for a rapid first paint.

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

I can also easily adjust the styles of my components based on different states (variant="primary" vs variant="secondary") or a global theme. The component will apply the correct styles automatically when I dynamically change that context. 💅

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

Dynamic Styling: Simply style your components with a global theme or based on different states.

动态样式：使用全局主题或基于不同状态，轻松设置组件样式。

CSS-in-JS still offers all the important features of CSS preprocessors. All libraries support auto-prefixing, and JavaScript offers most other features like mixins (functions) and variables natively.

CSS-in-JS 仍然提供 CSS 预处理器的所有重要功能。所有库都支持自动前缀，JavaScript 本身提供了大多数其他功能，如 mixins (functions) 和变量。

I know what you are thinking: “Max, you can also get these benefits with other tools or strict processes or extensive training. What makes CSS-in-JS special?”

我知道你在想什么：“Max, 你也可以通过其他工具、严格的处理或广泛训练获得这些好处。是什么让 CSS-in-JS 如此特别？“

CSS-in-JS combines all these benefits into one handy package and enforces them. It guides me to the pit of success: doing the right thing is easy, and doing the wrong thing is hard (or even impossible).

CSS-in-JS 将所有这些好处集成到一个方便的包中，并强制执行它们。它引导我走向成功之境：做正确的事情很容易，做错事很难（甚至不可能）。

Who Uses CSS-in-JS?

谁在使用 CSS-in-JS?

Thousands of companies use CSS-in-JS in production, including Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, and many more. (including this website)

成千上万的公司在生产中使用 CSS-in-JS，包括 Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, 等等。(包括本网站)

Is CSS-in-JS For You?

CSS-in-JS 适合你吗？

If you are using a JavaScript framework to build a web app with components, CSS-in-JS is probably a good fit. Especially if you are part of a team where everybody understands basic JavaScript.

如果你在用某 JavaScript 框架来构建组件式的 web app, 那么 CSS-in-JS 可能非常适合你。特别是如果你的团队中每个人都理解基本 JavaScript.

If you are not sure how to get started, I would recommend trying it out and seeing for yourself how good it feels! ✌️

如果你不确定该如何开始，我建议你尝试一下，亲眼看看它有多好！✌️