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` 模塊中的樣式。