MaintainableCSS 《可维护性 CSS》 --- 约定篇
约定
可维护的CSS具有以下约定:
.<module>[-<component>][-<state>] {}
根据所讨论的模块,方括号是可选的。这里有些例子:
/* 模块 Module container */
.searchResults {}
/* 组件 Component */
.searchResults-heading {}
/* 状态 State */
.searchResults-isLoading {}
注意:
组件和状态都由破折号定界。
名称形式上是用lowerCamelCase。
选择器以模块名称为前缀。
我必须给每个元素一个类名?
不需要,你可以这样写 .searchResults p
。但请注意,如果您嵌套包含p的模块,那么它将继承样式并需要重写(overriding)。
为什么要加模块名称前缀?
好问题。这里有一些没有前缀的HTML:
<div class="basket">
<div class="heading">
CSS:
/* module */
.basket {}
/* heading component of basket module */
.basket .heading {}
有两个问题:
1. 当查看HTML时,很难区分模块和组件;
2. `.basket .heading` 组件将继承意想不到副作用的 `.heading` 模块中的样式。