模块化CSS

模块化CSS主要是让CSS可以达到有效的复用，而不是一上来就是一大堆CSS。

一开始写CSS相信都是把一个标签需要的样式全都写在一个类里，这样不方便管理，于是下面带来了三种模块化CSS的方法。

• OOCSS
• SMACSS
• BEM

OOCSS

OOCSS的思想主要有两个原则，分离结构和外观，以及分离容器和内容。

分离结构和外观：意味着将视觉特性定义为可复用的单元，如下代码，可以套用很多不同的外观样式，simple这个皮肤类使用的是直角，那么可以换成另一个皮肤类complex，可能使用的是圆角，还加了阴影。

<div class="toggle simple">
    <div class="toggle-control open">
        <h1 class="toggle-title">Title 1</h1>
    </div>
    <div class="toggle-details open"></div>
</div>

分离内容和容器：不再将元素位置作为样式的限定词，一个CSS类名可以用在不同的元素，如上面的类toggle-title，它可以用于相应的文本处理，不用管这个文本具体是什么元素。

Bootstrap就是利用OOCSS的一个很好的例子，像text-center类，就是让文本居中的，不需要在意具体是什么标签。

SMACSS

SMACSS和OOCSS有许多相似之处，但SMACSS的不同点是把样式系统划分为5个具体类别

基础

如果不添加CSS类名，标记会以什么外观显现

布局

把页面分成一些区域，比如header，footer，侧边栏，网格等

模块

设计中的模块化，可复用的单元

状态

描述特定的状态或情况下，模块或布局的显示方式，比如，元素被激活或被禁用，亦或是输入错误等状态的样式

主题

一个可选的视觉外观层，可以让你更换不同的主题

<div class="toggle toggle-simple">
    <div class="toggle-control is-active">
        <h1 class="toggle-title">Title 1</h1>
    </div>
    <div class="toggle-details is-active"></div>
</div>

BEM

BEM是一个类名命名规则，它建议每个元素都添加带有如下内容的CSS类名

块名

​ 所属组件的名称

元素

​ 元素在块里面的名称

修饰符

​ 任何与块或元素相关联的修饰符

元素名加在两下划线之后，toggle__details，修饰符加载双横杠之后，toggle__details--active

details是元素，active是修饰符

BEM方法可以在OOCSS或SMACSS里使用，因为它只涉及命名规则，不涉及CSS的结构。

<div class="toggle toggle--simple">
    <div class="toggle__control toggle__control--active">
        <h1 class="toggle__title">Title 1</h1>
    </div>
    <div class="toggle__details toggle__details--active"></div>
</div>