CSS 设计模式

主要说的是 CSS 中的设计模式

分层

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

OO CSS

OO CSS 将⻚⾯可重⽤元素抽象成⼀个类，⽤ Class 加以描述，⽽与其对应的 HTML 即可看成是此类的⼀个实例。

tip

众多开发者忽视了 CSS 的表现（认为他太过简单，是⼀种机械的⼯作），⽽把更多关注在 Javascript 的性能上或者其他⽅⾯。

作⽤
1. 加强代码复⽤以便⽅便维护。
2. 减⼩ CSS 体积。
3. 提升渲染效率。
4. 组件库思想、栅格布局可共⽤、减少选择器、⽅便扩展。
注意事项
1. 不要直接定义⼦节点，应把共性声明放到⽗类。
2. 结构和⽪肤相分离。
3. 容器和内容相分离。
4. 抽象出可重⽤的元素，建好组件库，在组件库内寻找可⽤的元素组装⻚⾯。
5. 往你想要扩展的对象本身增加 class ⽽不是他的⽗节点。
6. 对象应保持独⽴性。
7. 避免使⽤ ID 选择器，权重太⾼，⽆法重⽤。
8. 避免位置相关的样式。
9. 保证选择器相同的权重。
10. 类名简短清晰语义化 OOCSS 的名字并不影响 HTML 语义化。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*控制结构的classs*/
      .skin {
        width: 150px;
        height: 50px;
        border-radius: 5px;
      }

      /*控制⽪肤的class*/

      .button {
        background: #fff;
      }

      .button-2 {
        background: #000;
      }
    </style>
  </head>

  <body>
    <a class="button skin" href="#">Home</a>
    <a class="button-2 skin" href="#">Blog</a>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*控制结构的classs*/
      .skin {
        width: 150px;
        height: 50px;
        border-radius: 5px;
      }

      /*控制⽪肤的class*/

      .button {
        background: #fff;
      }

      .button-2 {
        background: #000;
      }
    </style>
  </head>

  <body></body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--古老的写法-->
    <style>
      #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;
      }
    </style>
    <!--OOCSS-->
    <style>
      .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;
      }
    </style>
  </head>

  <body>
    <div class="sidebar">
      <dl class="list">
        <dt class="list-header"></dt>
        <dd class="list-body"></dd>
      </dl>
    </div>
  </body>
</html>

SMACSS

SMACSS (Scalable and Modular Architecture for CSS 可扩展的模块化架构的 CSS ) 像 OOCSS ⼀样以减少重复样式为基础。然⽽ SMACSS 使⽤⼀套五个层次来划分 CSS 给项⽬带来更结构化的⽅法：
- Base -设定标签元素的预设值 PS:html {} input[type=text] {}
- Layout -整个⽹站的「⼤架构」的外观 PS:#header { margin: 30px 0; }}
- Module -应⽤在不同⻚⾯公共模块 PS:.button{}}
- State -定义元素不同的状态 PS:.nav--main { .active {} }}
- Theme - 画⾯上所有「主视觉」的定义 PS: border-color、background-image

修饰符使⽤的是 -- ，⼦模块使⽤ \_\_ 符号。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="container">
      <div class="container-header">
        <div class="container-header__title">
          <h1 class="container-header__title--home"></h1>
        </div>
      </div>
    </div>
  </body>
</html>

BEM

ACE 认为 BEM 和 SMACCS ⾮常类似，主要⽤来如何给项⽬命名。⼀个简单命名更容易让别⼈⼀起⼯作。⽐如选项卡导航是⼀个块(Block)，这个块⾥的元素的是其中标签之⼀ (Element)，⽽当前选项卡是⼀个修饰状态(Modifier)：
- block- 代表了更⾼级别的抽象或组件。
- block\_\_element- 代表 .block 的后代，⽤于形成⼀个完整的 .block 的整体。
- .block--modifier- 代表 .block 的不同状态或不同版本。
- 修饰符使⽤的是 \_ ，⼦模块使⽤ \_\_ 符号。(不⽤⼀个 - 的原因是 CSS 单词连接)。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul class="menu">
      <li class="menu__item_state--current"></li>
      <li class="menu__item"></li>
      <li class="menu__item"></li>
    </ul>
  </body>
</html>

SUIT

Suit 起源于 BEM ，但是它对组件名使⽤驼峰式和连字号把组件从他们的修饰和⼦孙后代中区分出来：
- 修饰符使⽤的是—，⼦模块使⽤ \_\_ 符号。(不⽤⼀个 - 的原因是 CSS单词连接)
如果你不想使⽤如此严格或者复杂的命名规则，给每⼀个选择器加前缀同样可以达到这样的效果。 .s-product-details {} .t-product-details {} .js-product-details {}
结构属性将会被应⽤到 s-product-details 选择器中。主题属性将应⽤于 t-product-details 选择器。

ACSS

考虑如何设计⼀个系统的接⼝。原⼦（Atoms）是创建⼀个区块的最基本的特质，⽐如说表单按钮。分⼦（Molecules）是很多个原⼦（Atoms）的组合，⽐如说⼀个表单中包括了⼀个标签，输⼊框和按钮。⽣物（Organisms）是众多分⼦（Molecules）的组合物，⽐如⼀个⽹站的顶部区域，他包括了⽹站的标题、导航等。⽽模板（Templates）⼜是众多⽣物（Organisms）的结合体。⽐如⼀个⽹站⻚⾯的布局。⽽最后的⻚⾯就是特殊的模板。

.w-10 {
  margin: 10px;
}

.w-50 {
  margin: 50%;
}

ITCSS

Settings — 全局可⽤配置，设置开关。$color-ui: #BADA55; $spacing-unit:10px
Tools —通⽤⼯具函数。@mixin font-color() {font-color: $color-ui;}}
Generic — 通⽤基础样式。Normalize, resets, box-sizing: border-box;
Base — 未归类的 HTML 元素。ul {list-style: square outside;}}
Objects —设计部分开始使⽤专⽤类。.ui-list\_\_item {padding: $spacing-unit;}}
Components — 设计符合你们的组件。
- .products-list {@include font-brand();border-top: 1px solid $color-ui;}}
Trumps —重写，只影响⼀块的 DOM。(通常带上我们的 !important )

danger

ACE 没太深研究 SMACSS SUIT ITCSS

CSS 设计模式

分层​

OO CSS​

SMACSS​

BEM​

SUIT​

ACSS​

ITCSS​

分层

OO CSS

SMACSS

BEM

SUIT

ACSS

ITCSS