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