css 作为前端三剑客之一，在前端开发里有着举重若轻的地位。下面是这些年围绕 css 的写法变化。

BEM

就是一个命名法则，通过前缀来隔离作用域。

举个例子，.button-text-active 这个 class 用于描述一个按钮中的文本处于 active 状态下。

CSS Modules

一把利器，通过在构建时自动对 class 名称进行 hash，让开发者不再担心命名冲突问题。

CSS in JS

在 JS 里面写 CSS 很符合 React 社区 All in JS 的风潮。

• Styled Components
• Emotion

Atomic CSS

原子化 CSS，变着花样的玩，核心优势是写样式非常快，且生成的 css 体积非常小几乎没有重复，对优化首屏渲染非常有效。

• CSS Blocks
• Tailwind CSS

总结

以上各种方案都用过，在大部分业务中场景我还是喜欢 CSS Modules 的简单靠谱，当然其他方案也有各自适合的用武之地，比如写组件库可以考虑用 BEM 或者 CSS in JS，写活动页面就可以用 Tailwind CSS 快速出活。

本文原载于：baiyun.me

原文链接：https://baiyun.me/css-evolution

如果你喜欢我的内容，请考虑请我喝杯咖啡☕吧，非常感谢🥰 。

If you like my contents, please support me via BuyMeCoffee, Thanks a lot.