写好你的css代码

最近在review其他同事的代码时,经常会看到一些写得比较难看的css代码。一方面开发人员经验不是很足,另外一个方面我虽然知道有问题,但如何将css代码写好我自己确实也是缺乏一套比较完整的理论知识来驾驭。这里把我看到和工作中遇到的问题稍微总结一下。

命名空间

组件应该使用唯一的命名空间做为前缀.
例如ddl是drop down list组件的缩写。这里可能需要大家对这个缩写有一定的共识。

1
2
3
4
5
6
7
8
9
10
11
.ddl-container {
//
}


.ddl-item-list {

}


.ddl-item {

}

css类会被大量使用,所以应该用唯一的命名空间来将其分组归类。

类名

单词间用单横杠符分隔
尽量短,但必要时可以长

html标签

其他

强烈不建议使用!important规则