CSS 写法进化史
September 11, 2018
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