漫谈 CSS 方法论（上）

大家好，我是CUGGZ。

CSS 方法论是一种面向 CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定，并且在组织 CSS 时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。

根据 CSS 状态 2020 的调查结果显示，目前使用最多的五种分别为： BEM、ACSS、OOCSS、SMACSS、ITCSS。

下面就分别看看这五种CSS方法论！

1. BEM

BEM 全称为 Block Element Modifier，分别表示块（Block）、元素（Element）、修饰符（Modifier），它是由 Yandex 团队提出的一种 CSS 命名方法。这种命名方法让 CSS 便于统一团队开发规范和方便维护。该方法论由以下三部分组成：

• Block： 尽量以元素的性质来命名对象，例如：.list、.card、.navbar；
• Element： 使用 __ 两个下划线来连接 Block 对象，例如：.list__item、.card__img、.navbar__brand；
• Modifier： 使用 -- 两个连字符连接 Block 或 Element 对象，例如：.list__item--active、.card__img--rounded、.navbar--dark。

在 BEM 中并没有那些抽象的规则，它是基于功能为导向（Function-Oriented Programming, FOP）而设计的，不存在像是 .pl-3 这种难以理解的 class 名称，为了保证 BEM 能够合理的将元素模块化，需要遵守以下规则：

• 不能使用 class 以外的选择器来编写样式；
• 不要过度模块化，应该适当控制元素的模组化深度。

（1）Block 块

所谓的 Block 就是指应用中可独立存在的元素，类似于 SMACSS 中的 Layout 或 Module，这里称其为块。需要遵守以下规范：

• Block 名称需要清楚的表达其用途、功能、意义，且具有唯一性；
• Block 可以放在页面上的任何位置，也可以相互嵌套；
• 单词之间可以使用驼峰形式或者使用 - 将其分隔。

参考以下代码：

.list { /* ... */ }
.card { /* ... */ }
.navbar { /* ... */ }
.header { /* ... */ }

（2）Element 元素

如果把块描述为一个元素，那就可以将 Element 描述为此元素的子元素。参考以下规则：

• Element 名称需要清楚的表达元素的用途及意义；
• Element 和 Element 之间可以相互嵌套；
• Element 与Block 之间使用 __ 两个下划线连接；
• 单词之间可以使用驼峰式或者使用 - 将其分隔。

参考以下代码：

.list__item { /* ... */ }
.card__img { /* ... */ }
.navbar__brand { /* ... */ }
.header__title { /* ... */ }

这里需要注意，Element 无法独立于 Block 之外，其存在的目的就是子元素，元素既然不存在，那何来的子元素？如果使用 SCSS 来编写样式，可以改用 & 父选择器来：

.list {
  display: flex;
  &__item {
    flex: 0 0 25%;
  }
}

这样可读性就变好了一些，然后就可以将这些样式应用于 HTML 元素上了：

<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>

BEM 没有过多复杂的概念，而且通过 class 名称就可以知道 HTML 元素的结构，更容易理解和使用。

下面再来看一个 Element 相互嵌套的例子：

<ul class="list">
  <li class="list__item">
    <a href="list__item__link"></a>
  </li>
  <li class="list__item">
    <a href="list__item__link"></a>
  </li>
</ul>

一个元素通常不会只有两层结构，很多时候都具有三层以上的结构。此时使用 BEM 编写的代码就会像上面这样。这里的问题在于这样的处理会造成嵌套越来越深，导致 class 名称越来越长，HTML代码可读性越来越差。如果存在多层嵌套，可以尝试进行以下修改：

<ul class="list">
  <li class="list__item">
    <a href="list__link"></a>
  </li>
  <li class="list__item">
    <a href="list__link"></a>
  </li>
</ul>

这也就意味着，所有的子元素都仅仅会被 .list 所影响，link 不会绑死在 item 下，link 可以自由的放在 list 的任何位置。

（3）Modifier 修饰符

Modifier 就像 OOCSS 中的 Skin 与 SMACSS 中的 State，主要用来表示 Block 或 Element 的行为及样式。参考以下规范：

• Modifier 名称需要清楚的表达元素样式、状态或行为；
• Modifier 与 Block 或 Element 之间使用 -- 两个连字符连接；
• 单词之间可以使用驼峰式或者使用 - 将其分隔。参考以下代码：

.list__item--active { /* ... */ }
.card__img--rounded { /* ... */ }
.navbar--dark { /* ... */ }
.header__title--size-s { /* ... */ }

Modifier 也是无法单独存在的，Modifier 必定是作用于某个对象，这里所指的对象可能是 Block 或 Element。如果使用的是 SCSS，可以改用 &父选择器：

.list {
  display: flex;
  &__item {
    flex: 0 0 25%;
    &--active {
      color: #fffc3d;
    }
  }
  &--dark {
    color: #fff;
    background-color: #272727;
  }
}

然后就可以将样式应用在 HTML 元素上了：

html

复制代码

<ul class="list list--dark">
  <li class="list__item"></li>
  <li class="list__item list__item--active"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>

从上面 HTML 代码中就可以很明显的看到其关联性，很容易的辨认出哪些是 Block，哪些是 Element，哪些是 Modifier，并进一步推断出哪部分的 HTML 可以独立使用，这也是 BEM 的初衷。

2. OOCSS

（1）基本概念

OOCSS 是 Object Oriented CSS 的缩写，意为面向对象的CSS。它是所有 CSS 方法论中最早提出的一个，由 Nicole Sullivan 提出。可以把它理解为将 CSS 模块化。

OOCSS 提倡样式可重用性，在编写 CSS 样式时需要遵循以下规则：

• 应尽量避免使用后代选择器(.navbar ul) 或 id 选择器(#list)；
• 应尽量避免样式依赖于结构，尝试使用 class 替代标签选择器。

（2）主要原则

OOCSS 有两个主要原则：结构与样式分离和容器与内容分离。

1）结构与样式分离（Separate structure and skin）

结构与样式之间就像 .btn 与 .btn-primary 的关系一样。来看例子：

$theme-colors: (
  primary: blue,
  success: green,
);
.btn-primary {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  color: #fff;
  background-color: map-get($theme-colors, primary);
  border: 1px solid map-get($theme-colors, primary);
  border-radius: 0.25rem;
}

平时我们可能习惯性的把全部样式都写在同一个class 中，就像上面代码一样。此时如果我们需要新增一个主题为 success 的按钮呢？你可能会这样做：

.btn-primary {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  color: #fff;
  background-color: map-get($theme-colors, primary);
  border: 1px solid map-get($theme-colors, primary);
  border-radius: 0.25rem;
}
.btn-success {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  color: #fff;
  background-color: map-get($theme-colors, success);
  border: 1px solid map-get($theme-colors, success);
  border-radius: 0.25rem;
}

这时，两个按钮就会有很多重复的样式，每增加一个主题的按钮，就需要增加一组样式，这就有点浪费时间了。而 OOCSS 中的结构与样式分离主要就是为了改善这个问题，将以上代码根据 OOCSS 的规范进行改写：

.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  color: black;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.btn-primary {
  color: #fff;
  background-color: map-get($theme-colors, primary);
  border: 1px solid map-get($theme-colors, primary);
}

在 OOCSS 的概念中，表现型的 style 就属于样式，封装型的 style 就属于结构，如下所示：

• 样式(skin)：color、background-color、border-color；
• 结构(structure)：display、box-sizing、padding。

那这样做的用意是什么呢？button 按钮一般是这样来使用这些样式的：

< button  class = "btn btn-primary" > Primary 

这样就可以很明确的知道这个元素的结构与样式，以后如果想要增加不同主题的按钮，就只需要编写像.btn-success、.btn-danger这样的样式类即可，而无需再编写按钮的结构。

当然，也可以借助 Sass 中的 @each 来更快速地实现多种主题按钮的样式：

$theme-colors: (
  primary: blue,
  success: green,
  danger: red,
);
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  color: black;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
@each $key, $value in $theme-colors {
  .btn-#{$key} {
    color: #fff;
    background-color: $value;
    border: 1px solid $value;
  }
}

按钮在定义时只需添加对应的样式即可：

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

相信通过上面的例子，你已经了解了什么是结构与样式分离。如果以 OOCSS 中的 OO (Object Oriented) 来描述的话，这里的结构(Structure)就是所指的元素。以上面例子来说，我们封装了 button 元素，以后如果要使用 button 的话，只需要编写 .btn 结构样式名称与对应的样式（skin)即可。

2）容器与内容分离（Separate container and content）

接下来看看容器与内容该如何分离。容器与内容之间就像 .card 与 .btn 的关系一样。来看例子：

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
}
.card button {
  display: inline-block;
  padding: 0.375rem 0.75rem;
}

在编写 CSS 样式时，通常都是根据 HTML 的结构来编写。从上面的代码中可以看出，.card 里面有个 button。这样编写样式就会失去灵活度，button 就完全被绑定在了 .card 里面，OOCSS 中的容器与内容分离主要就是用来改善这个问题的，将上面的代码根据 OOCSS 的规范进行改写：

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
}
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
}

容器与内容分离旨在将两个不同的父子元素给分离出来，借此达到父子元素不相互依赖的目的。且父子元素只存在名称上的关系，实际上两者都可以单独存在并可以在不同的区域使用。这里的 .card 就属于容器，.btn 就属于内容，如下所示：

• 容器(container)：.container、.col-4、.header；
• 内容(content)：.btn、.input、.dropdown。

需要注意，并非所有的元素都必须遵守容器与内容分离的原则，来看下面的例子：

css

复制代码

.col-4 {
  flex: 0 0 100% * (4/12);
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  &-body {
    margin: 10px auto;
  }
}

一个对象可能同时是容器与内容。对于 .col-4 对象来说，.card 就属于内容，而对于 .card-body 对象来说，.card就属于容器。那你可能会想，为什么不把 .card-body 做分离呢？不是说容器必须与内容作分离吗？这里的 .card-body 如果独立存在本身是没有任何意义的，需与.card 搭配才会有意义，在这种情况下，.card-body 属于 .card 的继承，就无须将其分离出来，与前面的.btn 不同，.btn 独立存在是可以重复使用在其他元素上的。

通过上面的例子，相信大家已经理解了 OOCSS 的基本思想。其实，Bootstrap 就是根据 OOCSS 规范实现的，来看例子：

html

复制代码

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

可以看到，这段代码中包含了 .navbar、.navbar-light等 class，这些就属于 OOCSS 中的结构与样式分离，而.form-inline、.btn 等 class 就属于容器与内容分离。如果对 OOCSS 方法论感兴趣，可以阅读一下 Bootstrap 的源码，其处理的细腻程度可以说是将 OOCSS 发挥的淋漓尽致。

漫谈 CSS 方法论（下）https://developer.aliyun.com/article/1411188