基本设置

• 2 空格缩进
• UTF-8 编码

声明

兼容 IE 8 以上浏览器。

基本命名

类名使用完整英文单词或抽掉空格的英文词组。

/* 推荐 */
.module {}
.helloworld {}

/* 不推荐 */
.konnichiwa {} /* 非英文单词会导致大家无法正常阅读 */
.modl {} /* 每个人的缩写未必一致，会造成不统一 */
.hello-world {} /* 类名请只使用一个没有分隔[-_]的词 */

驼峰写法或下划线分割单词的写法都存在一个问题，我们的主观无法判断单词的分割。比如yellowgreen这个单词，如果使用分单词的写法可能被写成yellowGreen或yello_green，造成风格不统一。

当然，抽掉空格也会带来另外的问题，比如a synchronous request和asynchronous request的意思是完全相反的，这时候抽掉空格就会出问题。不过这种情况是开发者们可以主动避免的，在代码 review 时也可以找出存在歧义的命名。

另外，在能确保准确描述目标元素的情况下，尽可能地让类名更加简短。

.form-submit {} /* 推荐 */
.form-submittingbutton {} /* 不推荐 */

组件名称尽量使用名词或抽掉空格的名词性词组，这样可以降低冲突的可能性。

有且仅当有层级关系时使用“-”连接，比如组件内的元素类名采用组件名“-”子类名的形式：

<div class="uploader">
  <input type="text" class="uploader-text" />
  <input type="button" class="uploader-button" />
</div>

这时选择器在 CSS 中应该平行地定义，以便降低优先级，便于覆写。

.uploader {}
.uploader-text {}
.uploader-button {}

不要求类名的层级结构和 HTML 保持一致。

<div class="grid">
  <div>
    <div class="grid-caption">
      <div class="grid-caption-text"></div>
      <div class="grid-caption-button"></div>
    </div>
  </div>
  <ul class="grid-row">
    <li class="grid-cell"></li>
  </ul>
</div>

允许模块穿插使用。

<div class="header">
  <div class="container"> <!-- 穿插一个别的组件 -->
    <div class="header-logo"></div>
    <div class="header-nav"></div>
  </div>
</div>

但不建议在高层级中放置低层级元素，这样会破坏逻辑。

<div class="module">
  <div class="module-caption">
    <div class="module-caption-content"> <!-- 推荐:低层嵌入高层 -->
      <div class="module-text"></div> <!-- 不建议:高层嵌如低层 -->
    </div>
    <!-- 允许:同级嵌套 -->
    <div class="module-captioncontent">
      <div class="module-text"></div>
    </div>
  </div>
</div>

保持结构灵活性

我们的设计应该尽可能地让样式可以用于更多标签。

<style>
.section {}
.section-head {}
.section-body {}
</style>
<div class="section">
  <div class="section-head"></div>
  <div class="section-body"></div>
</div>
<dl class="section">
  <dt class="section-head"></dt>
  <dd class="section-body"></dd>
</dl>

甚至可以任意调整结构。

<style>
.article {}
.article-main {}
.article-title {}
</style>
<div class="article">
  <div class="article-main">
    <div class="article-title">
      <!-- ... -->
    </div>
    <!-- ... -->
  </div>
</div>
<div class="article">
  <div class="article-title">
    <!-- ... -->
  </div>
  <div class="article-main">
    <!-- ... -->
  </div>
</div>

样式修饰

一个组件可能有多种状态多种样式，可以在组件上添加修饰符来选择所需的样式。

在先前的命名规范中“-”被用于表示组件与其后代元素的关系。如果此处再使用“-”，逻辑上可能造成混乱。

考虑到这些修饰符可能和组件名冲突，在词法上推荐使用状态名词或形容词。

<div class="popup success">
  blah blah blah
</div>
<div class="popup warning">
  blah blah blah
</div>
<div class="popup error">
  blah blah blah
</div>

在选择器中使用多类来声明其样式。

.popup.success {}
.popup.warning {}
.popup.error {}

这样可以避免嵌套的冲突问题。