常见的 CSS 架构模式

前言：作为前端API调用工程师，经常会遇到其他人的代码冗余且重复，难以去维护和重构的情况。这种情况不仅仅只发生在JS中，在CSS中也会出现。如果开发者从来没有CSS架构意识，那么他的项目CSS代码将会一团糟。常见的如：class命名毫无章法，css代码存放位置毫无规律等等。 要解决上述的问题就需要用到现如今各种的CSS架构模式。

常见的 CSS 架构模式有很多：OOCSS、ACSS、BEM、SMACSS、ITCSS 等，其中 SMACSS 和 ITCSS 很相似。在项目中最常使用的是简化版的 ITCSS + BEM + ACSS。

 

ACSS

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

.f {
  display: flex;
}
.f-c {
  display: flex;
  flex-direction: column;
}
.f-r {
  display: flex;
  flex-direction: row;
}
.f-1 {
  flex: 1 1 0;
}
.oy-h {
  overflow-y: hidden;
}
.oy-a {
  overflow-y: auto !important;
}
.ox-h {
  overflow-x: hidden;
}
.o-h {
  overflow: hidden;
}

 

BEM 

BEM （Block Element Modifier）模式是一种常用的命名方法论，其将页面的视图分为：块 (Block)、元素 (Element)、修饰符 (Modifier)。

• 块 Block：代表功能独立的整体。块的类名应该使用简短而具有描述性的名字，例如：`header`，`container`，`menu`，`tabs`，`card`。
• 元素 Element： 代表块的一部分，使用两个短下划线（__）进行连接。例如：`header__title`，`menu__item`。
• 修饰符 Modifier： 代表块或元素上的标志。用它们来改变外表或行为。使用两个短中划线（--）连接，例如：`color--yellow`，`--fixed`。

例如，定义一个正常的按钮，在不同的情况下有两个状态：

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}

 

OOCSS

OOCSS（Object-Oriented CSS）即像面向对象那样使用封装和继承这两个特性。

譬如定义一个.table包含了表格的基本样式，如宽高、边框、内边距等等。这就是把基本的样式统一封装在了table类中。

// 表格对象
.table {
    // 基础的表格样式
}

然后去定义各种带有不同特性的表格：

.featured-table {
  // 特定的表格样式
}

最后就可以基于上面的设定来创建不同样式的表格组件。

<table class="table featured-table">
  <!-- 表格内容 -->
</table>

通过上述的方式就实现了表格样式的复用和可维护性。如果想要修改所有表格的基础样式，就只需修改表格对象.table；如果想要修改特定的表格样式，则只需要修改对应的子类样式。

 

ITCSS

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

• Settings 层：通常是一些样式变量，如定义通用的颜色值、字体大小的数值等；
• Tools 层：定义一些辅助函数、混合器（mixins）或者其他工具类。例如 SCSS 中的 @mixin 、@function；
• Generic 层：通用基础样式，一般是对浏览器默认样式进行重置，如 normalize.css、resets 等库；
• Base 层：对某些全局使用的元素进行通用的定制化样式，如页面的设置、ul 标签的设置等；
• Objects 层：所有使用 OOCSS 的地方，即某些结构和样式相分离的专用类；
• Components 层：具体的组件，其实可以对应到组件库中的每个组件；
• Trumps 层：重写某些样式，如 height 重新设置为 100px，只会影响某一小块的 DOM 元素，权重最高，类似 ACSS，但通常会加上 !important。

一般情况会根据实际的项目去进行简化，并不是七层都是必须的 。

最后，如果这篇文章对大家有所帮助的话，希望大家一键三连！红豆泥阿里嘎多！