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` 模块中的样式。