编写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中，提倡将对象的皮肤使用其基础类名来进行拓展。
<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更具有复用的能力