样式工程化方案

参考文章

样式模块化方案
webpack打包样式介绍
postcss 插件实例

预处理语言

less/sass/xxx

1. css 语法本身不提供编程语言很多特性，一般满足项目要求得使用预处理语言，掌握在项目中实际常用的。
   1.1. 变量，嵌套，mixin 主要是解决复用和模块化问题，需要有意识去维护 css 模块的拓展性
   1.2. less-loader，css-loader，style-loader 在现代脚手架都是自动支持，要了解各loader的作用
   1.3. postcss 它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理(处理特定场景的需求可以自定义插件)
   1.4. 可以看到具体DSL的语言都存在编译或者生成AST的过程，都离不开运行时或者编译时的话题

---

2. css常见模块化方案
   2.1. css 命名提供命名空间（BEM等），手动约定存在局限性
   2.2. css Modules: 借助构建工具编译生成唯一的hash，不会全局冲突
   2.3. css-in-js：对于组件化复用是优势，但是目前没有主流方案
   2.4. 组件样式修改：以业务修改组件库为例（组件库一般采用BEM规则），最后编译的样式文件找到具体类名覆盖即可；类似的父子组件样式修改不采用scoped代码的可读性更好

---

3. 项目样式打包方案
   3.1 对于 spa 项目，样式打包结果现代脚手架一般有最佳实践，在浏览器查看静态资源有app[hash].css/chunk-vendor.css/module.css等，一般在开展性能治理和优化场景会针对性处理
   3.2 css 文件本身没有模块化，后加载的覆盖之前的类名
   3.3 post-css 处理一些css的兼容和插件问题

---

业务场景

1. 组件库样式方案
   1.1 组件库考虑到样式的模块化和可拓展性一般围绕BEM设计样式，组件本身和样式资源都是分包模块化的
   1.2 样式本身作为子包，有大量的样式变量和模块化例子
2. 项目样式方案
   2.1 项目样式设计考虑这几点，组件本身样式；全局可复用样式（变量，模块，第三方组件）
   2.2 其中组件样式重复的可以模块化，提供变量可以做主题切换
   2.3 微应用样式方案（跟组件类似不赘述）

动画方案

1. 原生动画
   1.1 全局提供样式公共类
   1.2 框架自带虚拟组件
2. 使用第三方库

总结

1. css 本身不好掌握，但是一般业务场景不会太复杂，遇到组件库设计样式方案已经是相对深水区了
2. precss/css/postcss 各种DSL和插件，都是类似处理编译时和运行时的问题，跟跨端框架遇到问题思想相似
3. 构建工具提供成熟的loader和打包方案，在遇到性能优化时针对性处理，总体来说css的边界效应不明显，想做好有难度