个人还有很讨厌 CSS modules 的一点就是一旦你用 CSS modules 你就必须得分两个文件，对于可读性的影响积累下来其实非常大，碰到一个稍微复杂一点的组件就得左右两头来回改。现代基于组件的 web 开发其实更适合把模板、逻辑、样式都尽量放在一起，最好是放在一个文件里。
Why CSS in JS
其实相比于 CSS modules，CSS in JS 的方案被 vjeux 提出的时间要更早，当然最开始的 CSS in JS 基本上可以理解为单纯的把行内样式放到对象里去，与目前流行的基于 Tagged Templates 的 CSS in JS 方案差别非常大。
得益于组件化理念深入人心，开发者们不再关心具体的 HTML 和 CSS，复用组件就是安装引入 npm 包后直接使用。CSS in JS 的方案可以很好的契合这一开发方式，开发者不需要引入 CSS，不再需额外处理 CSS 的 bundle、prefix，所有都是 JS 也就不再需要配置各种 CSS 预处理器，极大降低了开发成本。
Why Tailwind CSS
https://tailwindcss.com/
Tailwind CSS 其实就是把在现代工程化框架里把原子 CSS 做到极致的一个 CSS 框架。其实原子 CSS 很早就出现了，最经典的如 clearfix ，在很多早期的 web 项目里都会有或多或少的原子 CSS。但早期的原子 CSS 并不被认为是一种最佳实践，或者说被认为是一种很差的方案。那个时代提倡所谓的「关注点分离」，HTML 的 class 应该有自己的语义，不应该把样式或者逻辑附在上面。不过随着时代的发展，在组件化流行的今天我们其实已经并不怎么关心 HTML 的语义（甚至那都不是 HTML，叫 JSX），语义化的功能已经被组件所取代了。对于每一个 div 标签，我们关心的其实只有他的样式。在这种背景下原子 CSS 就显得很有用了。
使用统一的「系统」变量可以极大减小心智负担。
在今天一个稍微严肃一点的前端项目，都会有一套所谓的「设计语言」（哪怕是直接套用现有的），他会规范页面中各种元素的「Design Token」，比如蓝色是那个蓝，红色是哪个红，圆角是多少间距是多少。现在比如说我需要把需要把这个按钮的背景色变成蓝色，你该怎么写？只是为了完成需求那笨办法有很多无庸赘述，但我们其实应该把这个我们所用的设计语言的「Design Token」在工程里维护起来。tailwind 天然就支持这一点。
// BAD
.button {
background: #3370ff; // 不知道哪里来的神秘字符串
}
// GOOD
.button {
@apply bg-blue-500; // blue-500 是我们设计语言中规定的正蓝色
}
再比如我们的项目的 CSS 中经常会有各种神秘数字，比如 17px、27px、35px 这种，这种 magic number 积累多了以后其实对于心智负担相当大，因为你并不知道该选择哪个数字合适只能看着调。使用 tailwind 规定了「Design Token」之后可以很大程度缓解这一点。其实对于设计师来说，基于 4px 的设计方案也是一种好的选择。
// BAD
.sliceContainer {
padding: 24px 24px 13px; // why 13 ?
}
// GOOD
.sliceContainer {
@apply px-6 pt-6 pb-3;
}
使用原子类可以大大减少需要起名的场景
命名可以算是开发中最难的事情之一，尤其是在组件化开发已经深入人心的今天，你其实完全没必要给你的 div 起一个有意义的名字。使用这个组件的页面并不会关心你组件的顶部叫 header，底部叫 footer（除非你是些基础组件需要给外界复用），你只需要把样式放上去就好了。
也许有人会觉得大量的内联样式类很不好维护，不过就我们实践下来的几个大型项目的经验来说，相比 CSS modules ，行内样式在可维护性上其实是要更好一些的。
与组件内联可以更好的实现「高内聚低耦合」
所有使用 CSS（包括 CSS modules）的解决方案其实都有一个问题，就是不好删代码：你很难确定这段样式是不是真的没用了，直到出线上事故为止。使用 tailwind css 你可以让样式到死都跟着组件走，组件删了样式也就去掉了，几乎零成本的降低了冗余代码的可能性。
Utility-First, not Utility-Only
最后，使用 tailwind 不是一个必选项，他可以很好的和其他方案结合着使用，用它也几乎不会带来任何成本。在原子样式或者说「Design Token」上有更为激进需求的可以考虑 chakra，几乎就是 tailwind 的 react/vue 版。
参考阅读
React: CSS in JS – NationJS
CSS Modules Welcome to the Future
CSS Utility Classes and Separation of Concerns
Why Tailwind CSS
参考资料
“分享、点赞、在看” 支持一波
本文分享自微信公众号 - 大前端技术沙龙（is_coder）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。