[css] css 几种设计模式(规范)

OOCSS (Object Oriented CSS)

两个原则：
独立的结构和样式
独立的容器和内容

创建OOCSS的关键部分:
创建一个组件库
独立的容器和内容，并且避免样式来依赖位置
独立的结构和样式
使用类名为扩展基本对象
坚持以语义类来命名类名

<div class="item">
  <ul class="item-list">
    <li class="item-list--item">
      <h3 class="item-heading">...
      
<button class="button button-primary">primary</button>
<button class="button button-info">info</button>

BEM(Block,Element,Modifier)

BEM与SMACSS两者类似

BEM代表块（Block），元素（Element），修饰符（Modifier）。

一个块是一个独立的实体，就像应用的一块“积木”。
一个块既可以是简单的也可以是复合的（包含其他块）。
一个块范围内的一种元素的名字也必须是唯一的。一种元素可以重复出现多次。
一个独立的块可以放置在页面的任意位置 ，包括嵌套在其他块里。

一个元素是块的一部分，具有某种功能。
元素是依赖上下文的：
它们只有处于他们应该属于的块的上下文中时才是有意义的。

修饰符作为一个块或是一个元素的一种属性，代表这个块或这个元素在外观或是行为上的改变。
一个修饰符有一个名字和一个值。多个修饰符可以同时使用。

命名约定模式：

.block{}
.block__element{}
.block_modifier{}	

.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block_modifier代表.block的不同状态或不同版本。

<ul class="menu">
      <li class="menu__item">...</li>
      <li class="menu__item_state_current">...</li>
      <li class="menu__item">...</li>
</ul>    

SMACSS(Scalable and Modular Architecture for CSS)

五种样式类型：
Base (基本)
Layout（布局）
Module (模块)
State (状态)
Theme (皮肤)

<div class=“container”>
      <div class=“container-header”>
        <div class=“container-header__title”>
              <h1 class=“container-header__title--home”>

METACSS | ATOMCSS (原子CSS)

本质是以classname取代inline-style的工作
以样式为中心的行为模式

<div class="fl mr10 red">
    <span class="blue fl"></span>    
</div>