运用 CSS methodologies 去实现模块化

1、什么是 CSS methodologies

---

CSS methodologies，能够理解成 设计模式，也能够理解成 css 规范，市面使用状况以下图：

上图来源：https://2019.stateofcss.com/technologies/

你可能在平常开发中并不会专门花时间去注意和了解 CSS methodologies，但随着你经验的积累，你可能会本身思考，或者阅读别人的代码、参考网上成熟的框架，这里面都或多或少的蕴含了一些 css methodologies 的闪光点。而下面要介绍的几种主流的 css methodologies，则能够帮你作到很好的总结和梳理。

2、常见的 CSS methodologies

---

一、OOCSS

面向对象的 CSS（Object-Oriented CSS，简称 OOCSS ），由 Nicole Sullivan 于 2008 年提出，这基于她在雅虎的工做。

（1）规则

一、不要使用 ID 用 Class

直接使用class来设定样式，这样写不仅是能够增长语义，同時也下降css对html的依赖。

二、结构和样式分离

虽然早期 html 和 css 实现告终构和样式的分离，但 css 内部一样存在两种类型的样式：

• 结构样式（例如长宽、距离）

• 皮肤样式（例如颜色、阴影）

因此 OOCSS 建议把这两种样式拆开。

好比有三种按钮，白色的/绿色的/红色的，可分别定义为：

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

若是你真的有不少个具备紫色按钮，则能够建立一个单独的紫色按钮类。这样能够大大减小CSS代码的数量。

三、容器和内容分离

内容毫不应该限制于特定的容器，为了重用，得分离开。

# 错误写法
.header .action {
}
.header .action .login {
}
.header .action .register {
}

# 正确写法
.header{
}
.action{
}
.login {
}
.register {
}

继承选择符是有用的，它能够减小因相同命名引起的样式冲突（常发生于多人协做开发）。可是，咱们不该过分使用。

（2）利弊

好处：

• 模块化，可重用

• 减小代码重复

• 提升可拓展性、可维护性、可读性

缺点：

• 虽减小了深层的嵌套选择器，可是多了更多的类

• 若是代码中没有大量重复的视觉模式，好比一些小项目，则应用OOCSS可能不切实际

（3）实例

Bootstrap 就是用的 OOCSS。

例如：

html

    <div class='header'>
        <ul class='menu'> 
            <li class='menu-item active'>1</li>
            <li class='menu-item'>2</li>
            <li class='menu-item'>3</li>
        </ul>
        <div class="action">
            <button class="btn btn-login">login</button>
            <button class="btn btn-register">register</button>
        </div>
    </div>

css：

.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}

二、BEM

BEM - Block Element Modfier（块元素编辑器）。诞生于2009年。

（1）内容

BEM 包括三个：

• Block - 块，如 header

• Element - 子元素，如 块menu 下的 item

• Modfier - 状态，如.current、.active

（2）规则

一、命名规范

• -中划线 ：仅做为连字符使用，表示某个块或者某个子元素的多单词之间的链接记号。

• __ 双下划线：用来链接块和块的子元素。

• -- 双中划线：用来描述一个块或者块的子元素的一种状态。

  在某些公司（如腾讯）的规范里，双中划线被单下划线（_）替代。

例如：.block-name__element--modifier

demo - html：

<div class='header'>
        <ul class='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div class="header__action">
            <button class="header__btn--login">login</button>
            <button class="header__btn--register">register</button>
        </div>
    </div>

demo - less:

.header {
    &__menu {}
    &__menu-item {}
    &__action {}
    &__btn {  
        &--login {}
        &--register {}
    }    
}

二、避免嵌套

BEM 最多只有 B+E+M 三级。

因此请避免 .block__el1__el2 的格式，直接改成 .block_el2。

这里的 block 就很像命名空间了。

（3）利弊

好处：

• 层级关系一目了然，具备可读性

• 不须要依靠层级选择器来限定约束做用域，可避免跨组件的样式污染。

缺点：

• 命名方式长而难看，书写不便（能够经过 less/sass 来简化书写）

• 在较小的组件中，BEM 格式可能显得鸡肋。但对于公共的、全局性的模块样式定义，仍是推荐使用 BEM 格式。（尤为对外发布的公共组件）

其余：

BEM 命名会使得 Class 类名变长，但通过 gzip 压缩后这个带宽开销能够忽略不计。

BEM是不容许用标签选择器的，哪怕最简单的 li 也得写成 .menu-item。

（4）实践

饿了么的框架elementUI就是BEM的一种，或者你也能够研究网站company.yandex.ru/。

三、SMACSS

SMACSS（Scalable & Modular Architecture CSS ，即 CSS 的可扩展性和模块化架构）。Jonathan Snook 于 2011 年提出，当时他在雅虎工做，为 Yahoo Mail 编写 CSS。

（1）规则

一、Categorizing CSS Rules（CSS 分类规则）

它将 CSS 分为5个不一样的类别：

• Base 基本规范

  例如 CSS Reset 和 CSS Normalize。

• Layout 布局规范

  例如左右分栏、栅格系统。

• Module 模块

  例如一个产品列表，一个导航条。可重用。

• State 状态规范

  例如选中状态。

• Theme 样式规范

二、Naming Rules（命名规则）

为类名添加前缀：

• Base 不须要前缀。并且是用标签而不是 class 和 ID。
• l- 用做 Layout 的前缀：l-inline
• m- 用做 Module 的前缀：m-callout。但也能够不用前缀。
• is- 用做 State 的前缀：is-collapsed
• Theme 通常会新建个 theme.css，用以前存在的类名。若是想用单独的类名，可用 theme- 前缀。

例子：

<div class="l-box m-profile m-profile--is-pro-user">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">...</p>
</div>

（2）实例

在线 demo：https://codepen.io/savemuse/pen/gWVpvd

四、 Atomic CSS

Atomic CSS 也是雅虎提出的，能够从字面意思理解成原子 CSS。

（1）示例

<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

会有专门的 Atomic css 工具，帮助将上面 html 中的 class name 解析成正常的 css。（略）

（2）利弊

好处：将 CSS style 最小元件化，重用性最大化。

坏处：这根本就是在写 inline-style，只是咱们用 class name 的方式來表示而已。

（3）总结

这种作法真的很激进。我暂时没法接受。

3、总结

---

抛开激进的Atomic，我对剩下的 OOCSS / BEM / SMACSS 有以下建议：

• 他们各自的思想有互补也有冲突，在实际开发中能够有取舍的使用

• 他们均可以结合 CSS 预处理器（如 less/sass ）得到更好的效率

• 把上文分别介绍他们的好处列举在一块儿对比汇总，发现他们解决的核心问题就是：模块化