web/docs/guide/style/css.md

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

语法

• 注释统一采用 /* 注释内容 */。
• 为选择器分组时，将单独的选择器单独放在一行。

• 权重尽可能降低，不滥用 id 选择器，避免使用!important。

  /* 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 连接

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

/* 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）相关的样式，因此排在首位。

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

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

.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;
}