模块化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>