CSS常用架构#

引言#

痛点#

痛点：CSS设计之初是不需要,也没有考虑到这些问题的

1. 缺乏复用机制
   • 解决方案：模块化（组件化）的设计模式（方法论）
2. 编写效率低
   • 解决方案：预处理器、PostCSS
3. 没有局部作用域
   • 解决方案：CSS Modules

CSS的产生#

20世纪90年代,样式是写在HTML中的,样式嵌入在HTML中就导致HTML越来越大,越来越难以维护,所以就需要将样式从HTML中分离。

CSS的定义#

CSS（Cascading Style Sheets,层叠样式表）

1. 是一门样式表语言,不是编程语言（编写效率低、难复用）

2. 可层叠的样式声明（层叠规则复杂导致难预测）

3. 全局作用域（容易命名冲突、难维护）

常见的CSS设计模式#

OOCSS#

BEM#

SMACSS#

Functional CSS#

预处理器和PostCSS#

CSS Modules#

CSS in JS#