Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

1 常见的 CSS 架构模式

常见的 CSS 架构模式有很多：OOCSS、ACSS、BEM、SMACSS、ITCSS 等，其中 SMACSS 和 ITCSS 很相似。我在企业级项目中最常使用的是简化版的 ITCSS + BEM + ACSS，所以本文首先介绍这三种模式，其他模式大家自己上网查看。

1.1 ACSS

ACSS 模式几乎是一个样式属性就对应了一个样式类。这种方式非常灵活，复用性很强、维护成本低，但破坏了 CSS 命名语义化。常见的名称如：d-flex、m-10、w-20 等。

1.2 BEM

BEM 模式是一种命名方法论，其命名层级为：块 Block、元素 Element、修饰符 Modifier，这也是 “BEM” 这个名字的由来。元素 Element 使用两个短下划线（__），修饰符 Modifier 使用两个短中划线（--），如下面的 HTML 片段和对应的类名：

<div class="demo-block">
  <a class="demo-block__element1">Link</a>
  <a class="demo-block__element1 demo-block__element1--modifier">Link</a>
</div>

<style>
  .demo-block {} // 块
	.demo-block__element1 {} // 元素
	.demo-block__element1--modifier1 {} // 修饰符
</style>

使用 BEM 可以规范命令，页面结构也比较清晰。

1.3 ITCSS

ITCSS 是一种样式的分层结构，一共有七层，七个层次从上到下依次为：

• Settings 层：通常是一些样式变量，如定义通用的颜色值、字体大小的数值等；
• Tools 层：通用工具函数，包括 mixins、function 等；
• Generic 层：通用基础样式，一般是对浏览器默认样式进行重置，如 normalize.css、resets 等库；
• Base 层：对某些全局使用的元素进行通用的定制化样式，如页面的设置、ul 标签的设置等；
• Ob