一、前言
目前主流的CSS方案有几种呢？我们可以参考 next.js 官方文档。
二、传统 CSS 方案
CSS 和 SASS 在本质上是相同的，都属于传统的 CSS。如果你喜欢编写原生 CSS，可以采用这个方案，并且建议使用 CSS Modules 来进行编写，因为它能够提供更好的组件级别的隔离，有效避免 class 的冲突与污染。不过，该方案的主要缺点在于后期维护性较差，对 css 的掌握程度要求很高，当你需要构建复杂的设计系统、主题方案以及满足团队协作规范等需求时，会显得较为吃力。
三、CSS-in-JS 方案
CSS-in-JS 是一种非常流行的方案。React 背后的开发团队以及相当一部分热衷于 React 风格的开发者，似乎有一种偏执，他们倾向于将 HTML、CSS 这些图灵不完备的非编程语言，以及其他一切可以转化为 JS 的东西都转化为 JS，从而获得最大的灵活性和可控性。这也正是 CSS-in-JS 方案的优势所在：使 CSS 可编程，从而获取极佳的灵活性和隔离性。然而，CSS-in-JS 目前存在两个明显的弱点，在选择时值得考虑。如果开发的是单页应用程序（SPA），由于充斥着大量用 JS 编写的 CSS 代码，主 JS 文件的尺寸会变大，不利于首屏加载。如果你的应用是基于服务器端渲染（SSR），那么许多早期的 CSS-in-JS 库，如 styled-component、emotion 等，由于其机制是在运行时（run-time）生成 CSS，而非在构建时（build-time），所以对 SSR 的支持并不好。在 next.js 官方文档中可以看到，官方只能保证这些 CSS-in-JS 库在客户端（client side）的支持。
四、Tailwind 方案
最后一个方案是 Tailwind。它是一个极具天才的方案，其思想和创新性并不亚于 React 的发明。在 CSS-in-JS 和 Tailwind 孰优孰劣的问题上，曾爆发过旷日持久的争论。虽然仍有不少人不喜欢 Tailwind，但从目前的时间点来看，Tailwind 已经成为了主流，这一点可以从 github 的星星数量以及 nextjs 官方的态度中得到印证。如果你是对 CSS 不熟悉的新手，强烈建议首选 Tailwind，接下来我会说明原因并介绍它是什么。
（一）Tailwind CSS 的编写风格
从官网就可以看到 Tailwind Css 的编写风格，使用大量预制好的，原子化的 class 类名，直接写在 class 里。所谓原子化，就是最小化不能再分割了，Tailwind 90%以上的 class 类型，都是和 css 的属性一一对应的，这种原子化的 class，Tailwind 官方称之为 utility Class。这种写法给人感觉，就好像直接在写内联样式。第一次接触的人一般会嗤之以鼻：这样写出来的代码能看？那要自定义的 class 还有什么用？对，你的问题就是答案，官方就是要告诉你写自定义的 class 没用，不要写自定义的 class。虽然这种思想听上去惊世骇俗，倒反天罡，但已经被证实是正确的。
（二）为什么Tailwind CSS 是对的
- 根本不需要 class 做抽象，比如写了一个 UserProfileCard 业务组件，你的组件名字是 UserProfileCard，为什么还需要一个.user-profile-card 的 class？业务上的抽象是由组件完成的，css 只负责样式，css 不需要负责抽象任何业务。之前因为不明白这一点，很多人甚至都不知道怎么命名 css class，还推出了类似 BEM 的规范，其实都是没必要的。
- 把 class 和 html/jsx 分开来写需要来回切换，很影响效率，像 Tailwind 这样写在一起，既方便查看，又方便查找和修改。
- 一旦你停止写自定义的 class，而是采用 Tailwind 优化过的 utilities class，你的 css 文件就不会变得越来越大，所有人写的 css 就会趋于统一，bug 大大减少，css 可以在不同项目之间自由流通，你只要 copy paste，就可以立刻复用别人的代码。
（三）Tailwind CSS 的核心思想
Tailwind Css 的核心思想，是不要写自定义 class，而是直接写 utilities class，类似“内联样式”。那为什么不直接写“内联样式”呢？因为“内联样式”只是一个正确的思路，而不是实际的功能。Tailwind 提供各种非常实用的功能，比直接写“内联样式”的体验好上 100 倍。
最后有一点 Tailwind 带来的好处，恐怕很多人都没有注意，当我们在争论哪一种方案更好的时候，却往往忽略了 CSS 本身是一个很难的知识点。光是布局方式就有 10 余种之多，相比其他编程语言，我一直感觉精通 CSS 是需要硬门槛的，那就是智商，因为在理解 CSS 复杂概念的时候，感觉就像在做智商测试。虽然 CSS 是渐进式的，上手很容易，但这样造成了很多人学艺不精就囫囵吞枣。现在有了 Tailwind，对于很多 CSS 学习者来说真是福音，utilities class 是凝结了各种最佳实践的标准设计，用于学习和理解 css，简单多了，Tailwind 的官方文档，就是学习 CSS 的最好资料。
