OOCSS，SMACSS，BEM，ITCSS，Utility-First CSS，ACSS 都是 CSS 编写规则，是结构化编写和组织 CSS 的指南，在一个项目中采用一致的 CSS 编写规则，更利于他人理解你的代码和团队协作。

面向对象的 CSS

面向对象的 CSS（Object Oriented CSS，OOCSS）是指把样式重复的代码片段，定义为 CSS 对象

  • 盒模型与皮肤无关：盒模型属性与颜色、背景等皮肤主题属性分选择器定义
  • 样式与位置无关：避免使用标签、关系选择器，应用时，我们通常提取多个元素的公用属性，作为基本类 在其基础上，通过其它类扩展每个元素的个性属性 这是避免 CSS 代码冗余的常用方法
1
2
<div class="box bg-red"></div>
<div class="box bg-green"></div>
1
2
3
4
5
6
7
8
9
10
.box {
    width: 20px;
    height: 20px;
}
.bg-red {
    background-color: red;
}
.bg-green {
    background-color: green;
}

可扩展模块化 CSS 架构

可扩展模块化 CSS 架构（Scalable and Modular Architecture for CSS，SMACSS）定义了 CSS 分类和命名规则，并对 CSS 书写提出优化建议

  • Base：默认，基础，通用规则，包括重置浏览器样式的规则
  • Layout：布局规则，以 l- 或 layout-开头
  • Module：可复用模块规则
  • State：布局或模块的特殊状态规则，如隐藏，激活等，以 is 开头
  • Theme：皮肤或主题规则，可能包含另一种配色方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* base */
button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}
/* layout */
.l-header {}
.l-primarynav {}
.l-main-content {}
/* module */
.article-title {}
.article-content {}
/* state */
.is-hidden {}
.is-shown {}
/* theme */
.button-large {
    width: 60px;
    height: 60px;
}

块元素修饰符

块元素修饰符（Block Element Modifier，BEM）定义了一种 CSS 的命名规则，用于解决命名冲突

  • Block：块，忽略结构和优先级，具有独立意义的实体
  • Element：元素，块内部没有独立意义的实体
  • Modifier：修饰符，标识块或元素的外观、行为、状态被修改，含有修饰符的类名不可独立出现，通常跟在不含修饰符的类名后

BEM 在书写时需要遵循三个原则：

  • 使用 __ 两个下划线将块名称与元素名称分开
  • 使用 -- 两个破折号分隔元素名称及其修饰符
  • 一切样式都是一个类，不能嵌套
1
2
.block__elementOne--modifier {
}

倒三角形CSS

倒三角形CSS（Inverted Triangle CSS，ITCSS）主要用 SASS 实现 提供了一种 CSS 由通用到具体的分层（分类）方法，层次可以按需增删

  • Settings：全局变量、方法，例如字体、颜色定义
  • Tools：结合预处理器使用，全局使用的函数（function）、混入器（mixin）
  • Generic：浏览器默认样式重置，例如 normalize.css、reset.css
  • Elements（Base）：仅可使用类型（标签）选择器，例如 h1 {}
  • Objects：遵循 OOCSS 的对象的盒模型，无颜色、背景等
  • Components：可复用的 UI 组件
  • Trumps(Utilities)：对组件的微调和其他样式定义，可使用 !important

实用类优先CSS

实用类优先CSS（Utility-First CSS） 提供了一种外观组件的构建方法，以 tailwindcss 为代表

  • 按照一定规则，基于 CSS 实用类构建复杂外观组件
  • 不用起类名
  • 样式文件体积不会随项目无限增长
  • 增删类名，比直接修改属性更安全，维护更容易

原子CSS

原子CSS（Atomic CSS），可以看成 Utility-First CSS 的极致抽象 提供了一种 CSS 类的定义方法，提升大型项目 CSS 复用度

  • 每个类选择器中只包含一条属性定义，一次编写，到处运行
  • 属性名类似函数，属性值类似函数参数，像写内联样式一样写类名，适合 CSS-in-JS
  • 提供工具，可按需编译