从 BEM 谈大型项目中 CSS 的组织和管理（3）SMACSS

look_w

SMACSSSMACSS 表示的是可扩展和模块化 CSS（Scalable and Modular Architecture for CSS）。Jonathan Snook 在其同名的书中提出了这一思想。SMACSS 的基本理念是可扩展和模块化，并给出了在大型项目中管理和组织 CSS 文件的一些原则。SMACSS 把 CSS 样式规则分成若干个不同的类别：

• 基础：该类别中包含的是默认的 CSS 样式。作为其他样式的基础。
• 布局：该类别中包含与页面布局相关的 CSS 样式，用来进行模块的排列。
• 模块：该类别中包含的是可复用的模块的 CSS 样式。
• 状态：该类别中的 CSS 样式用来描述布局和模块在不同状态下的外观。比如在不同的屏幕尺寸下，布局会发生变化。标签式模块的每个标签页可以有显示或隐藏的状态。
• 主题：该类别和状态类似，只不过是用来改变布局和模块的视觉效果。

对于不同类别的 CSS 样式，SMACSS 有不同的命名规则。基础类别中样式一般使用元素类型选择器，用来规范元素的初始样式。布局类别中的样式一般使用“l-”作为前缀。状态类别中的样式一般使用“is-”作为前缀。而对于不同的模块，则使用模块的名称作为前缀。
ACSSACSS 表示的是原子化 CSS（Atomic CSS），是 Yahoo 提出来的一种独特的 CSS 代码组织方式，应用在 Yahoo 首页和其他产品中。ACSS 的独特性在于它的理念与一般开发人员的理解有很大的不同，并挑战了传统意义上编写 CSS 的最佳实践，也就是关注点分离原则。ACSS 认为关注点分离原则会导致冗余、繁琐和难以维护的 CSS 代码。
ACSS 的原则是把 CSS 样式打散成尽可能小的部分，每个 CSS 类只对应一条样式规则，从而达到最大化的可复用性。比如 CSS 类 M(10px)所对应的样式规则是 margin: 10px。在应用 CSS 样式时，只需要在把所需要的原子化 CSS 类名添加到 DOM 元素上即可。ACSS 提供了 Atomizer 工具来生成最终的 CSS 样式文件。
在 HTML 页面中，按照 ACSS 的命名方式添加所需要的原子化 CSS 类名，再使用 Atomizer 工具来解析 HTML 页面并生成对应的 CSS 文件。  中是使用 ACSS 的多媒体对象示例。
清单 7. 使用 ACSS 的多媒体对象

1 2 3 4 5 6 7 8

<div class="BfcHack M(10px)"> <a href="http://oocss.org/" class="Fl(start) Mend(10px)"> <img src="https://placehold.it/50x50"/> </a> <div class="BfcHack"> OOCSS media object </div> </div>

在使用 Atomizer 工具之后，生成的 CSS 文件如  所示。
清单 8. Atomizer 工具生成的 CSS 文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.Fl\(start\) { float: left; } .M\(10px\) { margin: 10px; } .Mend\(10px\) { margin-right: 10px; } .BfcHack { display: table-cell; width: 1600px; *width: auto; zoom: 1; }

ACSS 的好处在于所生成的 CSS 文件只包含必须的内容，而且冗余很少，可以减少 CSS 文件的尺寸，提高性能。另外 CSS 类所对应的样式规则是不变的，这使得在不同的项目和组件之间共享 CSS 变得很容易。比如在使用传统的方式时，同样是名称为 header 的 CSS 类，其所实际表示的样式规则在不同的项目中可能完全不同。而在 ACSS 里面，名称为 M(10px)的 CSS 类所表示的样式规则永远都是 margin: 10px。ACSS 可能的缺点在于它与大多数开发人员所理解的最佳实践差异很大，可能不容易被接受。
CSS 组织和管理上面介绍了 BEM、OOCSS、SMACSS 和 ACSS 等几种不同的 CSS 命名规则，各有优缺点。对于开发团队来说，最重要的是找到最适合的组织和管理的方式。不需要盲目的遵循所谓的最佳实践，而是要找到最适合的方式。笔者根据个人经验推荐下面的组织和管理方式。
ACSS 的思想虽然有很多的优点，也在 Yahoo 这样的大公司得到了生产实践，但是 ACSS 的做法可能比较难以被大多数开发人员所理解，因此除非是团队的决策，否则不推荐使用。比较推荐的做法还是模块化，更容易让人所理解。
首先需要一个基准的 CSS 样式表。这可以使用 Normalize.css 和 Bootstrap 4 中的 Reboot。然后是进行模块划分。对每个模块中采用 BEM 来作为命名规则。在现在的 Web 项目中，一般不直接编写 CSS，而是使用 SASS 或 LESS 这样的 CSS 预处理语言来编写。以  中的菜单的 CSS 样式为例，对应的 SCSS 代码如  所示。
清单 9. 生成菜单 CSS 的 SCSS 代码

1 2 3 4 5 6 7 8 9 10 11

.menu { list-style: none;    &__item {    font-weight: bold;       &--selected {      color: red;    } } }

在  中，SCSS 代码中通过嵌套的方式表示了 BEM 树的结构，通过 SASS 中的&可以创建出连接多个部分的 CSS 类名。SASS 使得编写 BEM 命名规则的 CSS 样式变得类似传统的 CSS。这既易于模块中样式的组织，又避免了代码重复。