预处理器（scss、less）

• scss、less 等是通过引入变量，作用域，编程语句等扩展 css 功能的 DSL 解决了 css 难复用、作用域全局污染、难维护，不灵活等问题。但需要通过预处理器转变成 css ，浏览器才能正确解析

后处理器（stylelint，autoprefixer）

• 将 css 代码通过编译原理分词解析生成抽象语法树
• 在抽象语法树上调用插件进行修改得到修改后的 ast 再转换成浏览器可识别的 css 代码

PostCSS 强大的插件系统，可以实现多种功能，包括预处理和后处理。

css 模块化

• 命名约束 - BEM

• vue-loader 中 scroped 通过编译后添加属性选择器 [data-xxxxx] 方式 实现样式隔离模块化

• css modules 通过 css-loader 编译将一个 css 文件中的样式命名转化成一个唯一的类名前缀，实现隔离

• css-in-js 通过利用 js 在运行时而不是编译时动态生产 css

  • 好处：编写样式更灵活，首屏渲染无须多余的 css 阻塞
  • 坏处： js 打包体积变大，运行时消耗

• 原子化 css 通过将样式分解成最小可复用单元，组合使用。

  • tailwind css 依赖 postCss 后处理器对 AST 进行修改
  • 优点：减少命名困难症，原子类复用率高
  • 缺点：有学习记忆成本，增加 html 类名