可扩展、模块化CSS--状态样式规则(翻译文)

SMACSS is becoming one of the most useful contributions to front-end discussions in years

状态样式将会增强或者覆盖其他样式。比如说折叠章节就有折叠和打开的状态。信息有成功和失败之分。状态一般应用到布局样式和基本模块之中。

状态的应用实例
<div id="header" class="is-collapsed">
    <form>
        <div class="msg is-error">
            There is an error!
        </div>
        <label for="searchbox" class="is-hidden">Search</label>
        <input type="search" id="searchbox">
    </form>
</div>

header是ID,我们可以猜到它有布局上的样式，而is-collapsed表示其实折叠状态，相反没有这个状态就是打开的样式状态。同样的msg也是如此，我们知道is-error代表这个msg是错误的。最后是输入模块，输入框前的文本隐藏。这些状态都应用到布局或者模块之中。
我们发现子类名和状态的样式规则有一些相似之处。然而，状态样式规则有两个特点，状态样式规则作用到布局样式和模块样式，并且它依赖Javascript的调用。第二点的区别是最为关键的。子类样式完全在样式渲染时候就已经确定并且不会改变，相反的状态样式是随着用户机器(client maching)而变动。所以有is-actived````或者is-tab-actived。 既然状态样式要覆盖掉原来复杂的基本样式规则，那么久允许使用!important```。当然是用它的情况尽可能的少为好，除非你真的需要用到。

状态样式规则和模块的混合

状态样式往往不能通过继承来使用样式。状态的出现时为了让模块更加独特而设计。所以状态样式的命名最好加上模块名，这样就会很显而易见。状态是为模块而来的，而不是全局独立二来的。

模块的状态样式
.tab {
    background-color: purple;
    color: white;
}

.is-tab-active {
    background-color: white;
    color: black;
}

在加载的样式的时序上，应该先加载全局样式，然后再加载状态样式。

原文地址：https://smacss.com/