为什么要模块化？

• 分治和复用
• 封装，不污染全局，不被全局污染。
• 继承

BEM(block:块,Element:元素,Modifier:修饰符)策略

.block__Element--Modifier

.块__元素--修饰

封装靠人为约定。

继承靠层叠特性。

基础组件样式

分治性强，复用性强。

.Button { /* Button通用样式 */ }

.Button--disabled { }

.Button--error { }

.Button--in-progress { }

<button class="Button Button--in-progress">Processing...</button>

缺点

人为约定总是不靠谱，有人覆盖了就呵呵哒。

业务组件样式

分治性强，复用性弱。

.product-details {}

.product-details__price {}

.product-details__price__num {}

.product-details__price__icon {}

.product-details__price--sale {}

<!-- product/details.html -->

<div name="price" class="product-details__price"></div>

缺点

需求肯定会变，万一目录(或者DOM上下级结构)调整了就嘿嘿嘿。

我想product/intro.html也要用到.product-details__price__icon{}样式咋办。

还有，代码冗余了。

Less的策略

跨文件继承

使用@import引入文件，再调用变量或者mixins。

缺点

变量命名冲突

css in js策略（限于React）

• 独一无二的命名，保证了封装。
• js映射文件，保证了开发的便利。
• 继承方式，还是利用层叠特性。

封装和继承

css原文件

.common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; /* blue color, light blue background */ }

.error { composes: common; /* red color, light red background */ }

html原文件

<button class="normal">

  Submit

</button>

生成的的css文件

.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }

.components_submit_button__normal__def6547 { /* blue color, light blue background */ }

.components_submit_button__error__1638bcd { /* red color, light red background */ }

生成的js映射文件

styles: {

  common: "components_submit_button__common__abc5436",

  normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547",

  error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"

}

编译后的html文件

/*html*/

<button class="components_submit_button__common__abc5436 components_submit_button__normal__def6547">

  Submit

</button>

跨文件继承

colors.css

.primary {

  color: #720;

}

.secondary {

  color: #777;

}

submit-button.css

.common { /* font-sizes, padding, border-radius */ }

.normal {

  composes: common;

  composes: primary from "./colors.css";

}

编译后的colors.css

.shared_colors__primary__fca929 {

  color: #720;

}

.shared_colors__secondary__acf292 {

  color: #777;

}

编译后的submit-button.css

.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }

.components_submit_button__normal__def6547 {}

<button class="shared_colors__primary__fca929

               components_submit_button__common__abc5436

               components_submit_button__normal__def6547">

  Submit

</button>

总结

规范是人工约定的模块化，CSS in js是机器制定的模块化。