编写可维护性的CSS

语义化

为什么重要？

1. 易理解
2. 现在的网站是响应式的，语义化而非形容化功能化能让调整更清楚
3. 易查找
4. 不用担心更新困难
5. 帮助自动功能测试
6. 易重用

代码重用

不必重用？

1. 不同情况样式改变

ID

不要使用ID来确定样式

权重太高，不利于覆盖修改；
ID的使用情况应该为提供额外的功能，比如说label的for，以及页面内定位。

惯例

/* Square brackets denote optional parts */
.<moduleName>[-<componentName>][-<state>] {}

命名实例

/* module container/root */
.searchResults {}

/* components of a module */
.searchResults-heading {}

.searchResults-item {}

/* state: such as AJAX loading */
.searchResults-isLoading {}

备注：这一块是我收获最大的地方，这样命名确实易于惯例，作者也给出了很多原因，详情可以看看原文。

总体－局部－状态

模块化（Modules）

什么是模块？

模块是一个明显独立的单元，可以跟其它模块一起组成更加复杂的结构。这就有点像一个屋子里面的电视机，沙发等，如果你取走其中一个，另外一个还是可以继续好好工作的。

在一个网站中可以看做模块的有：header，footer，搜索栏，登录框，购物车，文章，产品列表，导航栏，主页宣传等等。
模块由元件（components）组成，缺少元件，模块就不完整，比如说一个logo模块由图片，链接组成，这些就是logo模块的元件。
元件和模块有时候是不好区分的，比如说一个header里面可能包含一个logo，这个logo在这里是header的元件，但是本身又是一个模块

一个模块的实例－简化购物车

<div class="basket">
    <h2 class="basket-title">Basket</h2>
    <div class="basket-item">
        <h3 class="basket-productTitle">Product title</h3>
        <form>
            <input type="submit" class="basket-removeButton" value="Remove">
        </form>
    </div>
</div>

/* module container */
.basket {}

/* components */
.basket-title {}
.basket-item {}
.basket-productTitle {}
.basket-removeButton {}

注意这里类的命名。

宁愿复制也不要想着重用了。

状态（state）

当与用户有交互的时候，我们需要不同的样式来表现不同的状态，这些状态包括：showing, hiding, active, inactive, disabled, loading, loaded 等等，为了完成这个，需要额外的类属性。

状态应该与组件相关

.myModule {}

.myModule-isDisabled {}
.myModule-isActive {}
.myModule-hasProducts {}
.myModule-isHidden {}
.myModule-isLoading {}

<div class="myModule myModule-isDisabled">
    <p class="myModule-title myModule-title-isDisabled"></p>
</div>

修饰语（modifiers）

修饰语与状态类似，在对同一模块应用在不同地方，但是又有个别不同时特别有效。这一点在代码重用的时候特别有效。
例子：除了背景图片不同，其余的都相同

<!-- when viewing the "boys" category page -->
<div class="categoryHeader categoryHeader-boys">

<!-- when viewing the "girls" category page -->
<div class="categoryHeader categoryHeader-girls">

.categoryHeader {
    padding-top: 50px;
    padding-bottom: 50px;
    /* etc */
}

.categoryHeader-boys {
    background-image: url(/path/to/boys.jpg);
}

.categoryHeader-girls {
    background-image: url(/path/to/girls.jpg);
}

版本

推荐创造不同的版本，不要混用，单独更改。

编写可维护性的CSS