【青训营】- CSS革新（CSS in JS & utility-class & CSS模块化）

导读

大多数人在学习网页开发时的第一课即是关注点分离（separation of concerns）。即HTML负责网页的基本结构，CSS负责网页的样式效果，JS负责网页的行为功能。

简单地说，就是不要使用内联式，而是通过<script>和<link>从外部引入。以下形式就不推荐使用。

<div id="demo" style="color: blue;">
    hello world
</div>

传统CSS的痛点

通过声明式的语法，CSS可以单独维护，实现与 HTML 的松耦合。但同时传统CSS也存在诸多问题。

1. 全局作用域。CSS样式一旦生效，就会应用于全局，会造成各种各样的冲突。而为了避免冲突，通常会过度依赖复杂的id选择器、类选择器。
2. 依赖问题。通常情况下，网页会引入多个css样式文件，因此已经引入的css的文件可能会对后引入文件生成的样式产生影响。
3. 样式的清除。由于为了避免样式冲突，通常会写过于复杂的id选择器和类选择器，因此当一段css样式不再需要时，会难以查找清除。
4. 变量共享。css和js共享数据非常困难。因此，有时候在用js修改样式时可能会因为选择器复杂而忘记修改。
5. 打破隔离。当设计好一组样式，但又有新的样式需求产生时，不可避免的新生成的样式会对原有样式产生影响。

解决方法

• CSS模块化。Vue通过scoped CSS的方式保证CSS样式只在当前的组件中起效。标签上会不重复的生成data属性(形如：data-v-69f2668b)来表示他的唯一性。在编译后的生成的css上也会生成data属性选择器（如[data-v-69f2668b]）来私有化样式。

• CSS in JS。组件结构的React，要求HTML、CSS、JavaScript写在一起。通过借用JS ，可以解决上述所说的CSS的诸多问题。

<div id="demo" style="color: blue;">
    hello world
</div>

const style = {
  'color': 'blue',
};

ReactDOM.render(
  <h1 style={style}>
     hello world
  </h1>,
  document.getElementById('example')
);

• utility-class。以TailwindCSS为代表，通过CSS原子化来实现纯CSS的解决方案。通过已有的类进行组合，可以有效避免使用复杂的选择器。

参考资料

技术天地 | CSS-in-JS：一个充满争议的技术方案
vue中的css作用域、vue中的scoped坑点
CSS in JS 简介
React: CSS in JS – NationJS