一、什么是 CSS methodologies

CSS methodologies，可以理解成 设计模式，也可以理解成 css 规范，市面使用情况如下图：

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

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

二、常见的 CSS methodologies

1、OOCSS

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

（1）规则

1、不要使用 ID 用 Class

直接使用class来设定样式，这样写不只是可以增加语义，同時也降低css对html的依赖。

2、结构和样式分离

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

所以 OOCSS 建议把这两种样式拆开。

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

class="btn btn-default"class="btn btn-green"class="btn btn-red"

如果你真的有很多个具有紫色按钮，则可以创建一个单独的紫色按钮类。这样可以大大减少CSS代码的数量。

3、容器和内容分离

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

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

继承选择符是有用的，它可以减少因相同命名引发的样式冲突（常发生于多人协作开发）。但是，我们不应过度使用。

（2）利弊

好处：

缺点：

（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{}

2、BEM

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

（1）内容

BEM 包括三个：

（2）规则

1、命名规范

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

例如：.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 {}    }    }

2、避免嵌套

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

所以请避免 .block__el1__el2 的格式，直接改为 .block_el2。

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

（3）利弊

好处：

缺点：

其他：

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

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

（4）实践

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

3、SMACSS

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

（1）规则

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

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

Base 基本规范

例如 CSS Reset 和 CSS Normalize。

Layout 布局规范

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

Module 模块

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

State 状态规范

例如选中状态。

Theme 样式规范

2、Naming Rules（命名规则）

为类名添加前缀：

Base 不需要前缀。而且是用标签而不是 class 和 ID。

例子：

<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

4、 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）总结

这种做法真的很激进。我暂时无法接受。

三、总结

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。