css 模块化好处
- 复用性; 可复用性好
- 可维护性好; 一个模块的代码不会很多, 这样修改的成本就不会很大
已有方法
1. 模块名+子选择器
.itembox {
}
.itembox .hd{
}
.itembox .bd{
}
.itembox .ft{
}
说明
-
优点
- 可扩展性好, 组合 class 名实现模块扩展
-
缺点
-
选择器容易过长(
E F F2 F3 F4) -
嵌套有顺序要求,
class声明顺序
-
选择器容易过长(
2. 模块名加长
.itembox {
}
.itembox-hd{
}
.itembox-bd{
}
.itembox-ft{
}
说明
-
优点
- 子选择器无命名冲突问题
- 可以任意嵌套
-
缺点
- 选择器名字长, 增加文件体积
- 模块扩展麻烦, 没有子选择器(每个子元素都需要有多个class)
模块化 css 方案
采用第一种方法, 对于他的一些缺点, 可以通过一些规范来避免
-
对于模块的名称, 统一采用
.m-开头, 子选择器不允许通过.m-开头 -
模块子选择器定义不能超过 3 层(如:
.m-itemlist .bd .left .img img不允许), css 选择器效率 -
不要限定 class 的元素(如
.m-itemlist ul.list) -
不要使用
!important - 不要使用 id 给元素设定样式
- 对模块的同一个元素, 使他们的选择器有相同的优先级, 保证覆盖的一致性
-
对于公用的样式, 为了避免冲突, 采用
.c-和.g-规范(common, global)