CSS 模块化命名规则

基本设置

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

声明

兼容 IE 8 以上浏览器。

基本命名

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

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

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

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

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

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

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

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

  1. <div class="uploader">
  2.   <input type="text" class="uploader-text" />
  3.   <input type="button" class="uploader-button" />
  4. </div>

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

  1. .uploader {}
  2. .uploader-text {}
  3. .uploader-button {}

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

  1. <div class="grid">
  2.   <div>
  3.     <div class="grid-caption">
  4.       <div class="grid-caption-text"></div>
  5.       <div class="grid-caption-button"></div>
  6.     </div>
  7.   </div>
  8.   <ul class="grid-row">
  9.     <li class="grid-cell"></li>
  10.   </ul>
  11. </div>

允许模块穿插使用。

  1. <div class="header">
  2.   <div class="container"> <!-- 穿插一个别的组件 -->
  3.     <div class="header-logo"></div>
  4.     <div class="header-nav"></div>
  5.   </div>
  6. </div>

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

  1. <div class="module">
  2.   <div class="module-caption">
  3.     <div class="module-caption-content"> <!-- 推荐:低层嵌入高层 -->
  4.       <div class="module-text"></div> <!-- 不建议:高层嵌如低层 -->
  5.     </div>
  6.     <!-- 允许:同级嵌套 -->
  7.     <div class="module-captioncontent">
  8.       <div class="module-text"></div>
  9.     </div>
  10.   </div>
  11. </div>

保持结构灵活性

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

  1. <style>
  2. .section {}
  3. .section-head {}
  4. .section-body {}
  5. </style>
  6. <div class="section">
  7.   <div class="section-head"></div>
  8.   <div class="section-body"></div>
  9. </div>
  10. <dl class="section">
  11.   <dt class="section-head"></dt>
  12.   <dd class="section-body"></dd>
  13. </dl>

甚至可以任意调整结构。

  1. <style>
  2. .article {}
  3. .article-main {}
  4. .article-title {}
  5. </style>
  6. <div class="article">
  7.   <div class="article-main">
  8.     <div class="article-title">
  9.       <!-- ... -->
  10.     </div>
  11.     <!-- ... -->
  12.   </div>
  13. </div>
  14. <div class="article">
  15.   <div class="article-title">
  16.     <!-- ... -->
  17.   </div>
  18.   <div class="article-main">
  19.     <!-- ... -->
  20.   </div>
  21. </div>

样式修饰

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

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

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

  1. <div class="popup success">
  2.   blah blah blah
  3. </div>
  4. <div class="popup warning">
  5.   blah blah blah
  6. </div>
  7. <div class="popup error">
  8.   blah blah blah
  9. </div>

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

  1. .popup.success {}
  2. .popup.warning {}
  3. .popup.error {}

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