css模块化策略

为什么要模块化？

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

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是机器制定的模块化。