饿了么前端风格指南 - CSS

CSS 代码风格

基本设置

2 空格缩进
UTF-8 编码

空白与格式

大括号与选择器之间留空，冒号后面留空，注释内外前后留空。
理由：据说这样比较漂亮。
```
/* 我是注释 */
div { /* 我是注释 */ }
span {
color: red; /* 我是注释 */
}
```
在只有一条样式时允许和选择器写到同一行，不强制。
理由：写三行太占屏幕空间。
一个选择器中有多个样式声明时每条写一行。
理由：使报错可以精确到具体的规则上，便于排错。
多个选择器使用逗号隔开时写在不同的行，大括号不要另起一行。
理由：修改时不容易漏掉逗号后面的选择器。
```
div,
span {
color: red;
font-size: 12px;
}
```
每条样式声明后面都加上那个分号。
理由：复制起来方便。
所有最外层引号使用双引号。
理由：与 HTML 保持一致。

用逗号分隔的多个样式值写成多行。
理由：便于阅读与编辑。

.block {
box-shadow: 0 0 0 rgba(#000, 0.1),
            1px 1px 0 rgba(#000, 0.2),
            2px 2px 0 rgba(#000, 0.3),
            3px 3px 0 rgba(#000, 0.4),
            4px 4px 0 rgba(#000, 0.5);
}

功能限定

避免使用 ID 选择器。
理由：权重太高，不易维护。
禁止使用 @import 引入 CSS 文件。理由：各种坑不解释。

命名与模块化

0 值的单位建议省略，但不强制。
理由：大部分 0 值的单位是没用的。
16 进制颜色值中的字母统一小写。
理由：切换大小写麻烦。
类名中的字母一律小写。
理由：它不区分大小写，难道有人想统一大写？
类名中只使用字母、数字以及“-”。
理由：要是没有限制的话我怕一些猴子使用阿拉伯文。
```
.hello {} /* OK */
.module-title {} /* OK */
.panel-level1 {} /* OK */
.导航栏 /* Fuck */
```

SASS 代码风格

基本设置

2 空格缩进
UTF-8 编码

zindex使用规范

zindex.scss 用来统一项目中的 z-index 值，方便管理 z-index 的层级关系，避免 z-index 的值过大或者层级相互覆盖。

$zindexlist:
  searchbox                /* 搜索框 */
  premiumsign              /* 在 rstblock 中显示的品牌馆图标 */
  dropbox                  /* 显示信息的 hover 浮动框 */
  sidebar                  /* 右侧栏 */
  toolbardropbox           /* 右侧栏显示信息的 hover 浮动框 */
  modalshade               /* 浮动弹出框遮罩 */
  modal                    /* 浮动弹出框 */

$zindexlist 中的数组元素决定 z-index 值，从上到下 z-index 值越大，层级越高。

使用方法：

@include zindex($ele);

$ele 参数值，需要在 $zindexlist 中定义数组元素，注意变量的位置；
也可以使用 $zindexlist 中的已经定义的数组元素，但需要注意以后增删改不会有影响；
只支持正数，负数还是按照普通的方式。

CSS 模块化命名规则

基本设置

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 {}

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