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

上一篇:CF613E Puzzle Lover


下一篇:Activity的生命周期及各生命周期方法的作用