为什么要分层 | 首页

# 为什么要分层

CSS 有语义化的命名约定和 CSS 层的分离，将有助于它的可扩展性、性能的提高和代码的组织管理。
大量的样式，覆盖、权重和很多!important，分好层可以让团队命名统一规范，方便维护。
有责任感地去命名你的选择器。

# 命名规范

目前主流的命名规范有以下几种：

其中，使用最多的是 BEM 和 ACSS。

# SMACSS

SMACSS (opens new window)(Scalable and Modular Architecture for CSS 可扩展的模块化架构的 CSS)像 OOCSS 一样以减少重复样式为基础。
然而 SMACSS 使用一套五个层次来划分 CSS 给项目带来更结构化的方法:

Base (opens new window) - 设定标签元素的预设值。
Layout (opens new window) - 整个网站的「大架构」的外观。
Module (opens new window) - 应用在不同⻚面公共模块。
State (opens new window) - 定义元素不同的状态。
Theme (opens new window) - 画面上所有「主视觉」的定义。

修饰符使用的是--，子模块使用__符号。

# BEM

BEM (opens new window) 和 SMACCS 非常类似，主要用来如何给项目命名。
一个简单命名更容易让别人一起工作。比如选项卡导航是一个块(Block)，这个块里的元素的是其中标签之一(Element)，而当前选项卡是一个修饰状态(Modifier):

block (opens new window) - 代表了更高级别的抽象或组件。
block__element (opens new window) - 代表 block 的后代，用于形成一个完整的 block 的整体。
block--modifier (opens new window) - 代表 block 的不同状态或不同版本。

修饰符使用的是_，子模块使用__符号。(不用一个-的原因是 CSS 单词连接)

# SUIT

SUIT (opens new window) 起源于 BEM，但是它对组件名使用驼峰式和连字号把组件从它们的修饰和子孙后代中区分出来。
修饰符使用的是—，子模块使用__符号。(不用一个 - 的原因是CSS单词连接)
如果你不想使用如此严格或者复杂的命名规则，给每一个选择器加前缀同样可以达到这样的效果。

.s-product-details {}
.t-product-details {}
.js-product-details {}

1
2
3

结构属性将会被应用到 s-product-details 选择器中。主题属性将应用于 t-product-details 选择器中。

# ACSS

ACSS (opens new window) 考虑如何设计一个系统的接口。
原子(Atoms)是创建一个区块的最基本的特质，比如说表单按钮。
分子(Molecules)是很多个原子(Atoms)的组合，比如说一个表单中包括了一个标签，输入框和按钮。
生物(Organisms)是众多分子(Molecules) 的组合物，比如一个网站的顶部区域，它包括了网站的标题、导航等。
而模板(Templates)又是众多生物(Organisms)的结合体。比如一个网站⻚面的布局。
而最后的⻚面就是特殊的模板。

.m-10 {
  margin: 10px;
}

.w-50 {
  width: 50%;
}

1
2
3
4
5
6
7

# ITCSS

Settings — 全局可用配置，设置开关。(Global variables, config switches.)

$color-ui: #BADA55;
$spacing-unit: 10px;

1
2

Tools —通用工具函数。(Default mixins and functions.)

@mixin font-brand() {
  font-family: "UI Font", sans-serif;
  font-weight: 400;
}

1
2
3
4

Generic — 通用基础样式。(Ground-zero styles (Normalize.css, resets, box-sizing).)

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

1
2
3
4
5

Base — 未归类的 HTML 元素。(Unclassed HTML elements (type selectors).)

ul {
  list-style: square outside;
}

1
2
3

Objects — 设计部分开始使用专用类。(Cosmetic-free design patterns.)

.ui-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-list__item {
  padding: $spacing-unit;
}

1
2
3
4
5
6
7
8

Components — 设计符合你们的组件。(Designed components, chunks of UI.)

.products-list {
  @include font-brand();
  border-top: 1px solid $color-ui;
}
.products-list__item {
  border-bottom: 1px solid $color-ui;
}

1
2
3
4
5
6
7

Trumps — 重写，只影响一块的 DOM。通常带上!important(Helpers and overrides.)

.one-half {
  width: 50% !important;
}

1
2
3

← CSS 工作流 CSS 函数 →