饿了么前端风格指南 - 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这个单词,如果使用分单词的写法可能被写成yellowGreenyello_green,造成风格不统一。

当然,抽掉空格也会带来另外的问题,比如a synchronous requestasynchronous 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 {}

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