CSS方法论（一）

编写CSS会遇到什么问题？

其实CSS很好写，只要知道css语法，你就能够写出来，经过各类学习，你也能够作出一个很美丽的页面。对能熟练编写网页的人来讲，能够很简单的将设计图变成网页。
可是在中型/大型项目中，你每每碰见的问题，并非如何写出一个网页，而是：

• 在前端框架内引入UI框架，是否能保证你的样式与框架不产生冲突，怎么解决
• 是否能处理多人协做所产生的问题
• 怎么提升你的样式的可维护性
• 你的样式是否能够复用，怎么复用
• 能不能提高幸福感

甚至于我的，怎么让你本身的代码更优雅，让本身更有成长，而不是仅仅在写代码。

---

CSS方法论

早在前几年，社区就根据种种编写CSS所遇到的问题，提出了一些方法论：

• OOCSS
• BEM
• SMACSS
• Atomic CSS

OOCSS（面向对象的CSS）

社区内最先提出的一种方法，也能够说是模块化CSS的起源。由NicoleSullivan 于 2009 年提出，这基于她在雅虎的工做。

面向对象对于后端开发人员可能较为熟悉，那么在CSS中的面向对象是什么？

面向对象：把数据及对数据的操做方法放在一块儿，做为一个相互依存的总体——对象。对同类对象抽象出其共性，造成类。类中的大多数数据，只能用本类的方法进行处理。类经过一个简单的外部接口与外界发生关系，对象与对象之间经过消息进行通讯。程序流程由用户在使用中决定。

CSS中的对象是一个可复用的样式规则。

Basically, a CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.
-- OOCSS wiki

举个简单的例子，咱们在一个网站中，不少页面都须要使用到按钮，那么根据oocss的定义咱们应该怎么作？
在style中加入一个 btn 的类，以后网站内所有的按钮都使用这个样式。这个 btn 就是一个对象。

<style>
.btn {
    padding: 4px 8px;
    background-color: #bbb;
    color: #fff;
}
</style>
<button class="btn">按钮</button>

在例子中咱们定义了一个 btn 的css类。那么这个css类就是一个对象。熟悉面向对象的朋友确定知道，哦，咱们把button这个对象封装了。因此之后在网站中在使用按钮，直接用 btn 这个类就能够了。

接下来咱们来了解下，OOCSS包含了两个原则：

• 容器与结构分离（Separate container and content）
• 内容与样式分离（Separate structure and skin）

以及OOCSS的其余特色：

• 使用类名来扩展基础对象
• 坚持语义化的命名方式

容器与结构分离

一般在咱们写CSS的时候，咱们一般会根据Html元素的位置来规定样式，例如：

<div class="nav">
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</div>

.nav ul li {...}

而在OOCSS认为，咱们的样式不该该根据元素的位置来判断对象的样式。
而是应该给元素定义本身的样式，如：

<div class="nav">
    <ul class="list">
        <li class="list-item">列表1</li>
        <li class="list-item">列表2</li>
        <li class="list-item">列表3</li>
    </ul>
</div>

.list {...}
.list-item {...}

也就是说，在网页中的任何位置使用 list ，我都不须要考虑 list 的上下文是什么，不论什么状况下 list 的样式都不该该改变。

内容与样式分离

如今咱们就遇到了新问题，在以前咱们定义了一个 btn 对象，如今我想要再网页中加入一个红色的按钮怎么办？
在学oocss以前咱们可能说，在style改一下就行了，或者加一个红颜色的对象就能够了；

.btn {
    padding: 4px 8px;
    background-color: #bbb;
    color: #fff;
}

.red-btn {
    padding: 4px 8px;
    background-color: red;
    color: #fff;
}

这样修改的确是有一个红色的按钮，可是出现了什么问题？

• 我发现我写两遍的 padding: 4px 8px; 和 color: #fff;
• 拿我如今想要绿色、蓝色、橙色的按钮怎么办，甚至我想要大一点的按钮？

OOCSS提出了他的核心原则之一：内容与样式分离，他将对象设置为基本的样式，而若是这个对象存在多种多样的样式，咱们经过添加皮肤（skin）的方式给他添加样式。

.btn{
   padding: 4px 8px;
   background-color: #bbb;
   color: #fff;
}

.red{
   background-color: red;
}

<button class="btn red">按钮</button>

这样咱们要的红色按钮就出炉了，大家想要的绿色、蓝色等等等等爱要什么要什么...

使用类名来扩展基础对象

那么在这个例子中，咱们能够看到咱们使用了一个红色的按钮，可是咱们会发现一个问题，若是当咱们写了一个label的时候咱们想让他的字体是红色的，咱们若是不注意，样式颇有可能会冲突。

<button class="btn red">label按钮</button>
<label class="label red">我是红色的label</label>

在OOCSS中，提倡将对象的皮肤使用其基础类名来进行拓展。

.btn {...}
.btn-red {...}
.label {...}
.label-red {...}

这样咱们一眼就能够看出，咱们的扩展样式是对应哪一个对象的。也减小了样式的冲突。

坚持语义化的命名方式

OOCSS还提倡使用语义化的命名方式，这样有什么好处呢？咱们能够根据名称给皮肤定义使用场景，在特定场景使用特定的皮肤，这样就不须要担忧在网站中胡乱使用颜色了。

.btn {...}
.btn-edit{  background-color: blue;}
.btn-delete{  background-color: red;}

总结

若是对前端比较了解的同窗能够发现，其实这个方法咱们常常能使用获得，大名鼎鼎的Bootstrap就是使用了这种方法。
这种方法就是让你的CSS代码更灵活、更具备可复用性、可维护行及可扩展性。

BEM(Block-Element-Modifier)

什么是BEM?

BEM表明块（Block），元素（Element），修饰符（Modifier）,由 Yandex团队提出的一种前端命名方法论。
BEM是一种让你能够快速开发网站并对此进行多年维护的技术。 -- 早期描述
BEM是一种命名方法，可以帮助你在前端开发中实现可复用的组件和代码共享。

BEM是一个严格约定的命名规范，经过这种规范，来解决咱们在编写CSS是所遇到的问题。

BEM将网页中的元素分为块、元素、修饰符

/* 书写规范 */
.block {...} /* 块 块名*/
.block__element {...} /* 元素 块名 + __ + 元素名 */
.block--modifier {...} /* 修饰符 块名 + -- + 元素名 */

• .block 块：表明了更高级别的抽象或组件
• .block__element 元素：表明 .block 的后代，用于造成一个完整的.block的总体
• .block--modifier 修饰符：表明 .block 的不一样状态或不一样版本

块（Block）

咱们能够将块理解为web应用中的组件或者模块。
特色:

1. 嵌套式的构造
   Block 能够被嵌套到任何其余 block 里面去。例如，一个头部 header 能够包含一个 logo 、一个搜索表单 form 和一个登陆 login 。
2. 随意放置
   Block 能够在一个页面内任意移动，也能够在页面之间或项目之间移动。Block 做为独立的实体来实现，这使得在页面上改变 block 的位置 并确保其功能和外观一切正常 成为可能。
3. 可复用
   一个界面能够包含同一个 block 的几个实例。

元素（Element）

大部分组件都不是由多层HTML嵌套组成的，那么元素就是就是这个组件内部的各级元素。
这里须要注意的是，不论在HTML中一个块的结构是什么，在BEM规则中中，块下的元素所有属于块。

<div class="nav">
    <ul class="list">
        <li class="list-item">列表1 <i class="list-icon"></i> </li>
        <li class="list-item">列表2 <i class="list-icon"></i></li>
        <li class="list-item">列表3 <i class="list-icon"></i></li>
    </ul>
</div>

list-item 和 list-icon 都属于块 list 。

修饰符（Modifier）

修饰符与在OOCSS中的皮肤比较相似，属于组件在不一样状态或组件的不一样版本。

其余特色

• 一个块必须有一个“名字”（一个CSS类）才能被CSS规则所使用

为何不使用ID选择器或元素选择器？

1. 类容许无限的重复使用，而ID在页面中只容许使用一次
2. 元素具备元素自己的意义，不该该和组件互相产生影响

• 永远不要链式命名
  在以前提到过，元素应该只属于块，因此元素的命名只多是 block--element 而不是 block--element1--element2
• 尽可能避免子代选择器

1. 将样式与HTML结构解耦，减小修改HTML而形成的样式没法显示，一样减小了因HTML修改形成的样式重写
2. 解决了CSS特殊性的问题，全部的样式都是由一个类选择器定义。
3. 可是这很难作到

BEM解决的问题

• CSS样式全局性形成的样式冲突问题
• 多人协做的命名问题
• 解决层叠问题，使CSS的优先级保持相对扁平
• CSS的模块化，使CSS更具备复用的能力

---

SMACSS

SMACSS于2011年由JonathanSnook提出，当时他在雅虎工做。

SMACSS是指CSS 的可扩展性和模块化架构。咱们能够将SMACSS看作是对OOCSS和BEM的一个延伸。
刚刚讲过了BEM，那么咱们将咱们页面的样式都化为了组件，可是在大型网站开发中，这些组件依旧很庞大，那么在SMACSS中，它提出了将CSS分类这一律念。

SMACSS的分类

在SMACSS中，它认为CSS应该根据以下五种分组类别进行分类：

• Base（基础规范）：任何场合下，页面元素的默认外观，这里样式只会对标签元素自己作设定，不会出现任何class或id，可是能够有属性选择器或是伪类。
• Layout（布局规范）：布局是一个网站的基本，不管是左右仍是居中，甚至其余什么布局，要实现页面的基本浏览功能，布局必不可少。使用l-/layout-为前缀。
• Module（模块规范）：基本思想与BEM相似。使用m-/module-为前缀。
• State（状态规范）：元素在特定状态下的外观。可是与OOCSS分离Skin的方式不一样，SMACSS是抽取更高级别的样式类，获得更强的复用性。使用is-/has-为前缀。
• Theme（主题规范）：页面主题外观。使用t-/theme-为前缀

其余特色

• 命名方式借鉴BEM命名规范
• 一样提倡最小配饰深度，既尽可能不使用子选择器，保持CSS扁平化

---

Atomic CSS（原子化CSS）

由雅虎公司内部提出，并应用于雅虎官网。

刚刚咱们讲了几种方法论，都提到了重用性，那么原子化CSS就是将重用性运用到了极端。

Atomic Design（原子化思想）

在2013年网页设计师Brad Frost从化学中受到启发：原子（Atoms）结合在一块儿，造成分子（Molecures），进一步结合造成的生物体（Organisms）。

Brad将这个概念应用在界面设计，咱们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”（下图）完美阐述了咱们全部的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。

• Atoms（原子）：为网页构成的基本元素。
• Molecules（分子）：由原子构成的简单UI组件。
• Organisms（组织）：由原子及分子组成的相对复杂的UI构成物。
• Templates（模板）：将以上元素进行排版，显示设计的底层内容结构
• Pages（页面）：将实际内容（图片、文章等）套件在特定模板，页面是模板的具体实例。

原子化CSS

理解了原子化的设计，那么为何说原子化CSS就是将重用性进行到了极端。
让咱们来举个例子，GitHub上面有一款开源的ACSS工具，叫作 Atomizer
咱们使用它来看一下

<h1>Grid</h1>
    <h2>Inline Block</h2>
    <ul>
        <li class="W(1/2) D(ib) Bgc(#ccc) Ta-c">.W(1/2)</li><!--
        --><li class="W(1/2) D(ib) Bgc(#add8e6)">.W(1/2)</li>
        <li class="W(1/5) D(ib) Bgc(#ccc) Ta-c">.W(1/3)</li><!--
        --><li class="W(1/3) D(ib) Bgc(#add8e6)">.W(1/3)</li><!--
        --><li class="W(1/3) D(ib) Bgc(#add8e6)">.W(1/3)</li>
    <ul>
    <h2>Flex</h2>
    <ul class="D(f)">
        <li class="W(1/2) D(ib) Bgc(#ccc) Ta-c">.W(1/2)</li><!--
        --><li class="W(1/2) D(ib) Bgc(#add8e6)">.W(1/2)</li>
        <li class="W(1/3) D(ib) Bgc(#ccc) Ta-c">.W(1/3)</li><!--
        --><li class="W(1/3) D(ib) Bgc(#add8e6)">.W(1/3)</li><!--
        --><li class="W(1/3) D(ib) Bgc(#add8e6)">.W(1/3)</li>
    <ul>
    <!-- this is just to reload the page if you make any changes to the html -->
    <script src="//localhost:35729/livereload.js"></script>

看到这段代码，你们确定会怀疑人生，这是什么鬼？
那么咱们来下这段HTML生成的css代码

.Bgc\(\#add8e6\) {
  background-color: #add8e6;
}
.Bgc\(\#ccc\) {
  background-color: #ccc;
}
.Bgc\(\$primary\) {
  background-color: #f3f3f3;
}
.D\(f\) {
  display: flex;
}
.D\(ib\) {
  display: inline-block;
}
.Fw\(b\) {
  font-weight: bold;
}
.Fz\(30px\) {
  font-size: 30px;
}
.W\(1\/2\) {
  width: 50%;
}
.W\(1\/3\) {
  width: 33.3333%;
}
.W\(1\/5\) {
  width: 20%;
}

那么原子化的CSS究竟是什么？
将CSS的代码最小化。每个CSS的类里面只存在一条属性，而在使用时，用到这一条属性时，咱们只须要在HTML的class中加入对应的CSS类就能够，最小化了CSS，可是形成了HTML的臃肿。。

---

总结

咱们学习了几种CSS的方法论，社区内还有不少种其余的方法论，如SUITCSS，ITCSS等等这里就不一一进行讨论了。

最后咱们来总结下书写CSS的方法：

• CSS模块化，使CSS与上下文无关
• 使用 CLASS，确保复用性
• 使用命名约定及前缀，提升可读性
• 不嵌套 CSS，使CSS扁平化
• 提升CSS的可维护性及扩展性

下一篇我将介绍如今比较流行的编写CSS的方法如：

• CSS预处理器
• CSS后处理器
• CSS in Js
• CSS Module

---

引用

OOCSS——概念篇
BEM的定义
为何咱们要用BEM
Atomic Design原子设计理念：构建科学规范的设计系统
什么是模块化 CSS？