BEM、OOCSS、ITCSS...

本文在概述的基础上，进一步介绍 BEM、OOCSS、ITCSS 这些用于组织 pureCSS 的范式，也即是 CSS 架构。

尽管习惯上这几种范式一般会与 SCSS/LESS 等预处理器结合使用，但是在概念上，实际上是一种组织 CSS，避免 CSS 变得混乱的方法论（CSS 架构）。SCSS/LESS 更像是高效书写标准 CSS 的方言。

OOCSS#

面向对象的 CSS，推崇结构与样式分离，容器与内容分离。咋一看，这句话非常抽象，还是结合场景来看看。

结构与样式分离#

比如一个 Login 页面，有两个按钮，login-button和register-button，如果不考虑复用，一次性实现，可能是这样的。

css

.login-button {
	background-color: blue;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
}

.register-button {
	background-color: red;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
}

.login-button {
	background-color: blue;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
}

.register-button {
	background-color: red;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
}

这么看似乎也没啥问题。但是如果在一个大型网页中考虑，有很多个button，每一个button都类似，但是不完全一样。这种情况下，一次性实现很快会导致 CSS 变得混乱。

OOCSS 认为，每个 button 有相同的共性。将相同的部分抽离出来，作为一个btn类（结构），然后每个 button 独特的样式，抽离出来作为单独的样式类，如 btn-primary（样式）。

css

/* 结构类：定义基本结构，相同的部分 */
.btn {
	padding: 10px 20px;
	border-radius: 5px;
}
/* 样式类 */
.btn-primary {
	background-color: blue;
	color: white;
}
/* 样式类 */
.btn-secondary {
	background-color: red;
	color: white;
}

/* 结构类：定义基本结构，相同的部分 */
.btn {
	padding: 10px 20px;
	border-radius: 5px;
}
/* 样式类 */
.btn-primary {
	background-color: blue;
	color: white;
}
/* 样式类 */
.btn-secondary {
	background-color: red;
	color: white;
}

使用时，通过组合不同的 css 类，.btn .btn-primary来实现最终的样式。此为结构与样式分离。

容器与内容分离#

在如下的场景中，一个博客列表，一种有毛病的写法是这样的。

html

<style>
.blog-list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.blog-sidebar-list {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.blog-list .blog-list-item {
  border: 1px solid #e0e0e0;
  padding: 15px;
  margin-bottom: 15px;
}
.blog-list .blog-list-item p {
  color: #666;
  line-height: 1.6;
}
</style>

<div class="blog-list">
  <div class="blog-list-item">
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </div>
</div>
<div class="blog-sidebar-list">
  <div class="blog-list-item">
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </div>
</div>

<style>
.blog-list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.blog-sidebar-list {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.blog-list .blog-list-item {
  border: 1px solid #e0e0e0;
  padding: 15px;
  margin-bottom: 15px;
}
.blog-list .blog-list-item p {
  color: #666;
  line-height: 1.6;
}
</style>

<div class="blog-list">
  <div class="blog-list-item">
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </div>
</div>
<div class="blog-sidebar-list">
  <div class="blog-list-item">
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </div>
</div>

典型的问题比如 .blog-list .blog-list-item p这个选择器，p 与blog-list 组合在一起，是一种不理想的情况。因为 blog-list-item 也可能放在 blog-sidebar-list 中，这时候这个选择器就不起作用了。
很自然的解决方案就是移除选择器中的 .blog-list。

css

/* 移除选择器中的 .blog-list */
.blog-list-item {
  border: 1px solid #e0e0e0;
  padding: 15px;
  margin-bottom: 15px;
}
.blog-list-item p {
  color: #666;
  line-height: 1.6;
}

/* 移除选择器中的 .blog-list */
.blog-list-item {
  border: 1px solid #e0e0e0;
  padding: 15px;
  margin-bottom: 15px;
}
.blog-list-item p {
  color: #666;
  line-height: 1.6;
}

让 .blog-list-item作为内容，让.blog-list作为容器，两者拆分。使得 .blog-list-item 也能放在.blog-sidebar-list 中。这也就是所谓的容器与内容分离。鼓励有意识的区分容器和内容，让容器和内容的样式相互隔离，互不影响。

是的，这的看起就像是讲正确的废话，在经过长时间的磨练之后，这更像是一种会自然而然形成的技巧。在我的视角看来，OOCSS 更多的是实现思路上的指导意义，而非某种具体的解决方案。CSS 实现同一样式的路径很多，但这是几种较优的路子之一，它就像是在说 CSS 本就应该如此，选它吧，不会有啥问题。

代表性框架比如 Bootstrap（宽泛一点讲，大部分 CSS 框架实际上都符合 OOCSS 的理念）

BEM#

BEM — Block Element Modifier
类似于 OOCSS，BEM（Block-Element-Modifier）也是一种范式，提倡有意识区分的Block，Element以及Modifier。

Block 是指页面中的一个区块，比如Header,Container,Menu。
Element 即是指区块中的元素，比如menu-item,list-item等。
Modifier 则是修饰符，用来修饰区块 / 元素的状态，比如isActive, isDisabled
CSS 类名通过 Block__Element--Modifier 的方式进行组合。
一种示例如下

html

<div class="card">
	<div class="card__content">
		<h3 class="card__title">Card Title</h3>
		<p class="card__text">Card text</p>
	</div>
	<button class="card__button">Button</button>
	<button class="card__button card__button--primary">
		Primary Button
	</button>
</div>
<style>
/* Block Style */
.card {}

/* Elements Style */
.card__content {}
.card__title {}
.card__text {}
.card__button {}

/* Modifier Style */
.card__button--primary {}
</style>

<div class="card">
	<div class="card__content">
		<h3 class="card__title">Card Title</h3>
		<p class="card__text">Card text</p>
	</div>
	<button class="card__button">Button</button>
	<button class="card__button card__button--primary">
		Primary Button
	</button>
</div>
<style>
/* Block Style */
.card {}

/* Elements Style */
.card__content {}
.card__title {}
.card__text {}
.card__button {}

/* Modifier Style */
.card__button--primary {}
</style>

可以发现，BEM 跟 OOCSS 并不冲突，并且说的很像是一回事。
我认为对于Block，实际上也就是 OOCSS 中所谓的容器，Element实际上也就是 OOCSS 的内容（容器与内容分离）。只是换了一种说法。而 Modifer 则是一种另类的样式（OOCSS 结构与样式分离）。
区别在于 BEM 推崇一种看起来比较另类的Block__Element--Modifier的命名方式，不过这种组织 CSS 方式很好的与 SCSS / LESS 这样的预处理工具结合在一起，反倒是进一步提高了效率。

SMACSS#

SMACSS（Scalable and Modular Architecture）将 CSS 规则进行分类，分为 Base、Layout、Module、State 和 Theme 五种类型。

Base#

基本规则，定位类似于用户代理样式表。定义元素的默认值，例如重置样式、排版和其他全局样式。它们不应包含类或 ID。

css

html, body, ul, ol {
	margin: 0;
	padding: 0;
}

html, body, ul, ol {
	margin: 0;
	padding: 0;
}

Layout#

布局规则控制页面上各个区块的组织方式如结构、排列。这些规则通常应用于主要组件，如header、footer和main section。

css

/* Layout */
.l-container {}
.l-header {}
.l-footer {}

/* Layout */
.l-container {}
.l-header {}
.l-footer {}

Module#

模块是应用程序的可复用的组件（如按钮、表单、卡片）。它们应相对独立，在整个项目中易于迁移和复用。

css

/* Module */ 
.m-button {}
.m-card {}

/* Module */ 
.m-button {}
.m-card {}

State#

状态规则用于修饰模块或布局，表示所修饰组件所处的状态（类似于 BEM 中的 Modifier）。

css

/* State */
.is-active {}
.has-error {}

/* State */
.is-active {}
.has-error {}

Theme#

主题规则定义页面的不同主题或外观的样式。它们是可选的，仅当项目需要多个主题时才需要。

css

/* Theme */
.t-dark .m-button { }

/* Theme */
.t-dark .m-button { }

下面是一个 SMACSS 的 HTML 示例：

html

<div class="l-container">
	<header class="l-header"><!-- content --></header>
	<main>
		<button class="m-button is-active">Click me</button>
	</main>
	<footer class="l-footer"><!-- content --></footer>
</div>

<div class="l-container">
	<header class="l-header"><!-- content --></header>
	<main>
		<button class="m-button is-active">Click me</button>
	</main>
	<footer class="l-footer"><!-- content --></footer>
</div>

ITCSS#

ITCSS: Scalable and Maintainable CSS Architecture - Xfive
相比于 BEM 和 OOCSS，ITCSS（Inverted Triangle）则没有那么高的使用率，但满意率则是比较高的（stateofcss 2019 / 2020）。但是跟 SMACSS 很像。

它根据 CSS 的特异性按特定顺序组织 CSS，将 CSS 分为七层，得到一个清晰的层次结构，防止冲突从而使代码更易于维护。
自下而上逐级增加抽象程度。

ITCSS 分为七层：

设置：全局配置和变量，例如颜色、字体和断点。
工具（Tools）：整个项目中使用的混合和函数（在 SCSS 等预处理器中为 CSS 增加了编程特性，从而实现更好的复用）。
通用：高层次、低特异性的样式，定位类似于用户代理样式表，提供一个默认值，抹平样式差异，如 resets 和 normalizations。
元素：HTML 元素的默认样式，例如title、a和ul等
对象：与布局相关的样式，例如网格系统和容器。
组件：可重用的 UI 组件，例如按钮、卡片和表单。
Utilities：场景特定但实用的辅助类，例如间距和可见性。

看起来会发现，ITCSS 跟 SMACSS 很像，elements和generic实际上就是 SMASS 的base类，settings对应theme类，object和component则分别对应 SMASS 的layout 和 module。
但是缺少state层的定位，多了utilities层。此外还有一个面向预处理器的Tools层。
可以视为对 SMACSS 的一种改进。

html

<style>
/* Settings */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Tools used with SCSS */
@mixin clearfix {
	&::after { 
		content: "";
		display: table;
		clear: both;
	}
}
/* Generic */
*, *::before, *::after {
	box-sizing: border-box;
}
/* Elements */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-sans-serif);
	font-weight: bold;
}
/* Objects */
.o-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
/* Components */
.c-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: var(--primary-color);
	color: #fff;
}
/* Utilities */
.u-text-center {
	text-align: center;
}
</style>

<div class="o-container">
	<header> <!-- ... --> </header>
	<main> <button class="c-button">Click me</button> </main>
	<footer> <!-- ... --> </footer>
</div>

<style>
/* Settings */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Tools used with SCSS */
@mixin clearfix {
	&::after { 
		content: "";
		display: table;
		clear: both;
	}
}
/* Generic */
*, *::before, *::after {
	box-sizing: border-box;
}
/* Elements */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-sans-serif);
	font-weight: bold;
}
/* Objects */
.o-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
/* Components */
.c-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: var(--primary-color);
	color: #fff;
}
/* Utilities */
.u-text-center {
	text-align: center;
}
</style>

<div class="o-container">
	<header> <!-- ... --> </header>
	<main> <button class="c-button">Click me</button> </main>
	<footer> <!-- ... --> </footer>
</div>

Atomic CSS#

原子化 CSS（也称为函数式 CSS）越来越受欢迎，tailwind 大行其道。相比于上面各种组织 CSS 的范式，原子化 CSS 就如同一个逆子，反其道而行之。

通过为每个 CSS 属性创建一个 CSS 规则（进而创建唯一的类名），从而减少已定义规则总数的方法，从而实现大型样式重用。
比如对于background-color: red;这一个属性，可以创建一个 bg-red 的 css 类。除此之外，再无其他。
这样的好处是：

使用到的 CSS 的属性是有限的，从而将项目的总 CSS 规则限制在一个可接受的范围内。（CSS 文件体积缩减）
规避选择器的问题，将样式重新与 HTML 关联在一起，而不用担心选择器的命名、范围等一系列问题，查看 HTML 结构的同时也可以知道大致的样式
简单、准入门槛低，更容易被不精通 CSS 的人理解。
以 tailwind 首页的 example 为例，非常的暴力有效，在组件驱动开发场景下相对更契合。

html

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
	<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
	<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
		<blockquote>
			<p class="text-lg font-medium">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
		</blockquote>
		<figcaption class="font-medium">
			<div class="text-sky-500 dark:text-sky-400"> Sarah Dayan </div>
			<div class="text-slate-700 dark:text-slate-500">
				Staff Engineer, Algolia
			</div>
		</figcaption>
	</div>
</figure>

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
	<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
	<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
		<blockquote>
			<p class="text-lg font-medium">“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p>
		</blockquote>
		<figcaption class="font-medium">
			<div class="text-sky-500 dark:text-sky-400"> Sarah Dayan </div>
			<div class="text-slate-700 dark:text-slate-500">
				Staff Engineer, Algolia
			</div>
		</figcaption>
	</div>
</figure>

小结#

了解完上面这些 “CSS 架构” 之后，不难发现，不同的 CSS 架构之间并不冲突，更多像是对同一问题在不同视角下提供的解决思路，对问题的不同划分，实际上可以相互配合。