【CSS Tricks】深入聊聊前端编写css的方法论

目录

• 引言
• BEM 规范
• OOCSS 规范
• • 结构与样式分离
  • 容器与内容分离
• SMACSS 规范
• ITCSS 规范
• • 设置层
  • 工具层
  • 通用层
  • 元素层
  • 对象层
  • 组件层
  • 微调层
  • 由此分层后的项目代码结构也会相应做修改，主要有两种形式：
  • • 文件夹形式
    • 文件名形式
    • 引用方式按照层级顺序引用
• ACSS 规范
• 总结

引言

本篇内容旨在探讨前端css编写的规范，不讨论某种特定效果的css实现逻辑方法。

css作为前端开发工程师重要的一门技术，在开发工作中可能会花费比写js脚本更多的时间，就为了能让页面更贴合乃至1：1还原UI设计稿（往往事与愿违~）。且不谈最终实现的样式效果如何，单从css代码的混乱程度，就非常让人头大。如果遇到产品优化迭代，需要更新样式时，简直是团队噩梦。一个开发团队中每个人都有自己的编码习惯，有些人喜欢用拼音简称去命名样式类名，有些人喜欢在标签里写样式，有些人可能编写过程中忘记自己写过什么样式就重复覆盖了，偶尔会冒出几个机灵鬼用important去压制别人的样式。如果不采用某种规范去统一编写习惯，则会大大提高团队开发成本。

本篇搜罗了一些比较科学的css编写规范，供大家参考。结合自身编码环境希望可以总结出来一套属于自己的编写方法论。

---

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规范中命名规则以功能为导向，遵循几个基本原则：

• 不能使用class以外的选择器来编写样式（非硬性规定）
• 不要过度模块化导致类名过长，适当控制模组化深度。

---

OOCSS 规范

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

• 结构与样式分离
• 容器与内容分离。

结构与样式分离

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

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

.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: black;
  background-color: transparent;
}

.btn-primary {
  color: #fff;
  background-color: map-get($theme-colors, primary);
  border: 1px solid map-get($theme-colors, primary);
}

这样做的意义在于，可以在设置按钮样式的时候按照结构、样式的顺序去填写class，先通过结构类使按钮具备基础结构，然后通过样式类覆盖部分结构以及表现特定样式。

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

实践案例：在编写组件库时，可以借助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>

容器与内容分离

这是个比较考验实践经验的概念，需要在实际工作中灵活运用：

• 核心宗旨是将父子元素分离，达到父子间不相互依赖的目的。
• 有些子元素脱离父元素会失去本身的意义，则不应该分离。
• 有些子元素将会在其他元素中复用，例如btn、input等独立性比较强的子元素。

---

SMACSS 规范

SMACSS 全称为 Scalable and Moduler Architecture for CSS，意为可扩展的模块化 CSS 结构，由 Jonathan Snook 提出。SMACSS 不仅包含了结构与样式分离的概念，还具有极具特色的结构化命名的概念。所谓的结构化命名，就是将元素做结构分类并限制其命名，以此达到易扩展和模块化的目的。

SMACSS 相对于 OOCSS 更偏向于整体结构的分类及模组化 CSS，其中结构的分类包括：

• Base（基础）： 不需要特别的提供前缀，且不会使用到 class、id 选择器，目的在于设定元素基本样式。例如：html、*:before、img。
• Layout（布局）： 使用 l- 或 layout- 为次要布局样式提供前缀，目的在于将布局样式与其他样式做区分。例如：.l-header、.l-sidebar、.l-grid。
• Module（模块）： 使用块本身命名为子元素样式提供前缀，目的在于快速了解其相关性。例如：.card、.card-header、.card-body。
• State（状态）： 使用 is- 为状态样式提供前缀，通过语意化方式了解当前状态。例如：.is-active、.is-hidden、.is-collapsed。
• Theme（状态）： 不需要特别的提供前缀，使用对象本身的名称覆盖其原先的主题样式。例如：.l-header-dark、.card-dark。

---

ITCSS 规范

ITCSS 全称为 Inverted Triangle CSS，意为倒三角CSS，由 Harry Robers 开发。ITCSS 是一种可扩展和可管理的架构，独立于预处理器存在。它出现的主要目的是帮助组织项目的 CSS 文件，从而解决由级联和选择器的特殊性引起的问题。

核心思想：自上而下的管理体制，上层代码的影响比下层代码影响范围更大，下层代码可具体的覆盖上层代码的部分样式，但不影响上层代码的相关样式在其他下层代码处的表现状态。

该思想将项目中css分为七层，这里以sass作为预处理工具。

设置层

第一层 SETTINGS 表示设置，这一层包含项目的所有全局设置。通常会定义一些全局变量，例如颜色、字体大小等，这一层不会生成实际的 CSS。

$main-color: #6834cb;
$main-font-size: 24px;

工具层

第二层 TOOLS 表示工具，如果使用了预处理器，可以在这一层定义 function 和 mixins。Tools 层位于 Settings 层之后，因为 mixin 可能需要全局设置中的一些变量来作为默认参数。同样，这一层也不会生成实际的 CSS。

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

@mixin sample-mixin () {
  ...
}

通用层

第三层 GENERIC 表示通用，可以在这一层来定义重置或者标准化浏览器的基本样式，这一层很少会被修改。这也是第一个实际会生成 CSS 的层。

* {
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

元素层

第四层 ELEMENTS 表示元素，通常用来定义影响 HTML 单个标签的样式，例如 h1、p 标签的默认样式

h1 {
  color: $main-color;
  font-size: $main-font-size;
}

对象层

第五层 OBJECTS 表示对象，可以在这一层定义整个项目中可重用的页面结构类。与上一层相比，这一层对 DOM 的影响更小，具有更高的特异性（优先级），并且更加明确，因为现在将 DOM 的部分作为目标来设置了样式。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

组件层

第六层 COMPONENTS 表示 UI 组件，与对象层不同，组件是页面的特定部分。比如搜索框的样式，为组件定义的样式只会影响到对应的组件。这一层比上一层更加明确，因为现在为 DOM 设计了明确的样式。

.c-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  ...

  &--primary {
    background-color: #ff5959;
    color: #fff;
  }

  &--large {
    font-size: 16px;
    padding: 16px 14px;
    ...
  }
}

微调层

这一层也称为 Utilities，包含所有那些覆盖之前层中定义的任何其他规则的规则。它是唯一允许使用 !important 的层。

.d-none {
  display: none!important;
}

由此分层后的项目代码结构也会相应做修改，主要有两种形式：

文件夹形式

文件名形式

引用方式按照层级顺序引用

@import "settings.global.scss";
@import "settings.colors.scss";

@import "tools.functions.scss";
@import "tools.mixins.scss";

@import "generic.box-sizing.scss";
@import "generic.normalize.scss";

@import "elements.headings.scss";
@import "elements.links.scss";

@import "objects.wrappers.scss";
@import "objects.grid.scss";

@import "components.site-nav.scss";
@import "components.buttons.scss";
@import "components.carousel.scss";

@import "trumps.clearfix.scss";
@import "trumps.utilities.scss";
@import "trumps.ie8.scss";

---

ACSS 规范

ACSS 的全称为 Atomic CSS，意为原子CSS。它专注于创建很多小型的 CSS 样式类，以便在 HTML 上使用。这种方法旨在提供高度精细和可重用的样式，而不是为每个组件提供规则。这可以减少特异性（优先级）冲突并以可预测的方式使样式更具可变性。这种方法有助于减少代码冗余和覆盖 CSS 样式的混淆。

个人观点：

• 不建议使用。
• 当原子类过于庞大之后，学习成本将会非常高。
• 对于复杂的dom结构原子类数量过多，可读性不强。不利于后续开发人员维护。
• 如果非要用可以参考tailwindcss

---

总结

每个人的开发习惯有所不同，所处项目环境也有不同，所以不必要强求使用哪一种规范。个人比较建议各取所长融会贯通找到属于自己的方法论。

• 推荐使用 ITCSS 规范管理项目中的CSS文件。
• 使用 BEM 对类进行命名规范。
• 结合OOCSS && SMACSS 两个方法论抽象结构和样式，编写具体的CSS样式。这一条切记不要用力过猛，虽然可以增强复用性优化代码量，但是你会在设置某个DOM样式时填写一大堆类名，反而更像是 ACSS 的样子，有点本末倒置。