以下规则适用于 css 及 scss 文件。

## 语法
* 注释统一采用 `/* 注释内容 */`。
* 为选择器分组时，将单独的选择器单独放在一行。
* 权重尽可能降低，不滥用 `id` 选择器，避免使用`!important`。

```css
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
}
```

## BEM 命名原则
* block：模块，名字单词间用 - 连接
* element：元素，模块的子元素，以 __ 与 block 连接
* modifier：修饰，模块的变体，定义特殊模块，以 -- 与 block 连接

尽量简单语义化，明确它的用途，避免过度任意的简写。

```css
/* Bad example */
.j-info { ... }
.red { ... }
.active { ... }

/* Good example */
.j-button--info { ... }
.text-red { ... }
.cell-active { ... }

```

## 属性顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：

1. Positioning
2. Box model
3. Typographic
4. Visual
5. Misc

...

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。

盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的 内部 或者是不影响前两组属性，因此排在后面。

```css
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}
```