CSS 写法进化史

September 11, 2018

BEM

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

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.