Powered by GitBook

CSS LESS 开发规范

2 通用规范

2.1 选择器

[必须] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。

示例：

/* recommended */
#error,
.danger-message {
    font-color: #c00;
}

/* not recommended */
dialog#error,
p.danger-message {
    font-color: #c00;
}

[必须] 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

[必须] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* recommended */
#username input {}
.comment .avatar {}

/* not recommended */
.page .header .login #username input {}
.comment div * {}

2.1 属性缩写

常见的缩写属性声明有：

  • margin
  • padding
  • font
  • background
  • border
  • border-radius

[必须] 如上能够缩写的属性在没有指定其所有值的情况下，尽可能只写需要指定的属性的全称；需要设置所有值，才使用缩写

示例：

说明：

若元素只需要设置上、右内边距，则只写这两个属性

/* recommended */
.element {
  padding-top: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* not recommended */
.element {
  padding: 10px 10px 0 0;
  margin: 0 auto 20px;
}

[必须] 尽量避免声明靠后的缩写属性会重写声明在前的全称属性

示例：

说明：

background中没有特别指定其缩写对应的background-color值，在这种情况下其默认值会覆盖声明在前的background-color

background-color: red;
background: url(images/bg.gif) no-repeat top right;

[建议] 属性缩写中各个值，如果是同类型值（例如padding、margin、border-radius、border-width），则需要留意其顺序，若为不同类值（例如font、background、border），各值顺序不做硬性要求，但最好遵行一致的顺序

示例：

/* clockwise direction: top, right, left, bottom (TRLB, consonant of the word trouble) */
padding: 1px 2px 3px 4px;

/* vertial, horizontal */
border-width: 1em 2em;


/* background 全称属性声明顺序 */
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

/* background 缩写属性也遵行以上顺序 */
background: #000 url(images/bg.gif) no-repeat top right;


/* font 全称属性声明顺序 */
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

/* font 缩写属性也遵行以上顺序 */
font: italic bold .8em/1.2 Arial, sans-serif;


/* border 全称属性声明顺序 */
border-width: 1px;
border-style: solid;
border-color: #000;

/* border 缩写属性也遵行以上顺序 */
border: 1px solid #000;

2.2 属性声明顺序

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

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual
.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;
}