一些常见的 CSS 规范

OOCSS

OOCSS 是 Object-Oriented CSS 的缩写，是 Nicole Sullivan 于 2008 年提出的一种 CSS 规范，使用 OOCSS 可以让 CSS 更提高复用性和扩展性，同样也更容易管理，其主要目的也是为了写出具灵活、模块化和可复用的组件。

对于 OOCSS 来说，任何重复的模式都可以已成为对象，即一段特定代码。而对于 OOCSS 来说，以下几个主旨是一定需要遵从的

对象也要有明确的结构(structure) 和皮肤(skin)。

结构包含的对象有：

Height
Width
Margins
Padding
Overflow

皮肤包含的对象有：

Colors
Fonts
Shadows
Gradients

举例：

.button {
      
      
  width: 150px;
  height: 50px;
  background: #fff;
  border-radius: 5px;
}

.button-2 {
      
      
  width: 150px;
  height: 50px;
  background: #000;
  border-radius: 5px;
}

可以简化为：

.button {
      
      
  background: #fff;
}

.button-2 {
      
      
  background: #000;
}

.skin {
      
      
  width: 150px;
  height: 50px;
  border-radius: 5px;
}

分离容器与内容

举例说明：

#sidebar {
      
      
  padding: 2px;
  left: 0;
  margin: 3px;
  position: absolute;
  width: 140px;
}

#sidebar .list {
      
      
  margin: 3px;
}

#sidebar .list .list-header {
      
      
  font-size: 16px;
  color: red;
}

#sidebar .list .list-body {
      
      
  font-size: 12px;
  color: #fff;
  background-color: red;
}

可以简化为：

.sidebar {
      
      
  padding: 2px;
  left: 0;
  margin: 3px;
  position: absolute;
  width: 140px;
}

.list {
      
      
  margin: 3px;
}

.list-header {
      
      
  font-size: 16px;
  color: red;
}

.list-body {
      
      
  font-size: 12px;
  color: #fff;
  background-color: red;
}

我一开始的时候还真的写国第一种 CSS，然后到第三、四个页面就会发现，重载 CSS 会需要使用更多的选择器嵌套……

其实现在不少比较常见的 UI 库就有在实践 OOCSS，OOCSS 的优点包含：

速度

鉴于 CSS 的结构都分离了，开发者不需要大量重复代码，自然页面也能加载的更快
扩展性

下面的这几个还是挺显而易见的
效率
维护性
可读性

OOCSS 的缺点包括：

每个元素需要嵌套多个类
对小项目来说过于复杂
学习曲线较为陡峭

SMACSS

SMACSS 是 Scalable and Modular Architecture for CSS 的缩写，它定义了 CSS 的分类及命名规则。SMACSS 将 CSS 分为以下几种类型：

base

基础 CSS，主要是默认值的设置，类似于 CSS Reset 的配置

layout

布局以 l- 或 layout- 开头，如：

.l-full-width {
      
      
  width: 100%;
}

modules

单独的模块，命名规范为 .object--description {}，如：

.article {
      
      
  background: #000;
}
.article--title {
      
      
  font-size: 2em;
}
.article--text {
      
      
  font-size: 16px;
}

这里与 OOCSS 的差别就挺大的了，上文的 .article--title 如果在 OOCSS 中，就会使用 .article .title 的方式去实现。

state

状态，以 is- 开头，如：

<header id="header">
  <ul class="nav">
    <li class="nav--item is-selected">Home</li>
    <li class="nav--item">About</li>
  </ul>
</header>

theme

其他 UI 相关，如主题配色等

延伸阅读：Scalable and Modular Architecture for CSS，这是本书，我估计……一时半会儿内都不在我的阅读范围内了，先放一个 reference 吧：

Scalable and Modular Architecture for CSS

BEM

为 Block Element Modifier 的缩写，目前是最主流的一种 CSS 规范了，这种命名规范可以比较好的解决冲突的问题。Block 为有意义的独立个体，E 和 M 就比较明确了，格式为：.block-name__element-name--modifier-name。

以一个按钮来说，其命名规范如下：

.button__text {
    
    
  text-decoration: none;
}
.button__text_hovered {
    
    
  text-decoration: underline;
}

二者指向的都是 button ——这里的 button 指的是按钮，一个单独的块，而非元素——中的 text 元素，第二个 CSS 类则代表鼠标悬浮后的状态。

从市场占有率来说，BEM 最高，所以这个还是建议需要了解一下的。

ITCSS

这下面的几个都没怎么用过，先马一下，以后碰上了再补笔记。