Powered by GitBook

CSS LESS 开发规范

CSS 开发规范

1 统一代码风格

1.1 缩进

[必须] 使用 2 个空格做为一个缩进层级。

这是唯一能保证在所有环境下获得一致展现的方法。

示例：

selector {
  property: value;
}

1.2 空格

[必须] 选择器 与 { 之间必须包含空格。

示例：

selector {
}

[必须] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：

margin: 0;

[必须] 列表型属性值 书写在单行时，, 后必须跟一个空格。

示例：

font-family: Arial, sans-serif;

[必须] 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格。

示例：

box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;

[必须] 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

示例：

/* recommended */
background-color: rgb(255,255,255);

/* not recommended */
background-color: rgb(255, 255, 255);

1.3 行长度（有关换行）

[待讨论] 每行不得超过 120 个字符，除非单行不可分割。

说明：

常见不可分割的场景为URL超长。

[必须] 对于超长的样式，在样式值的空格处或,号后换行，建议按逻辑分组。

示例：

/* 不同属性值按逻辑分组 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162));
);

[必须] 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。

示例：

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

[必须] 为了获得更准确的错误报告，每条声明都应该独占一行。

示例：

/* not recommended */
.selector-1, .selector-2, .selector-3 {
}

/* recommended */
.selector-1, 
.selector-2, 
.selector-3 {
}

[必须] 对于包含多条声明的样式块与块之间须空一行，只包含一条声明的样式块之间无须空行，且声明本身只占一行

示例：

/* 无须空行 */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}

/* 此处须空行 */
.bullet-btn {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
}

1.4 注释

说明：

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

示例：

/* ==========================================================================
   comments like this
 ============================================================================ */

/**
 * or multiple-line comments like this
 * Short description describing the file.
 * 
 */

1.4 选择器

[必须] >、+、~ 选择器的两边各保留一个空格。

示例：

/* recommended */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* not recommended */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

[必须] 属性选择器中的值必须用双引号包围。

示例：

/* recommended */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

/* not recommended */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female
}

1.5 ID和Class命名

  • class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
  • 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
  • class 名称应当尽可能短，并且意义明确。
  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
  • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
  • 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

1.6 属性

[必须] 除非声明的属性只有一个，否则属性定义必须另起一行。

示例：

/* recommended */
.selector {
    margin: 0;
    padding: 0;
}

/* not recommended */
.selector { margin: 0; padding: 0; }

[必须] 属性定义后必须以分号结尾。

示例：

/* recommended */
.selector {
    margin: 0;
    padding: 0;
}

/* not recommended */
.selector {
    margin: 0;
    padding: 0
}