web前端编码规范

HTML

语法

1. 在属性上，使用双引号，不要使用单引号。

IE 兼容模式

1. Internet Explorer 支持使用兼容性 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式。

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

1. class
2. id, name
3. data-*
4. src, for, type, href, value
5. title, alt
6. role, aria-*
   Classes 是为高可复用组件设计的，所以他们处在第一位。Ids 更加具体而且应该尽量少使用（例如, 页内书签），所以他们处在第二位。

Boolean 属性

Boolean 属性指不需要声明取值的属性。XHTML 需要每个属性声明取值，但是 HTML5 并不需要。简而言之，不要为 Boolean 属性添加取值。

JavaScript 生成标签

在 JavaScript 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

CSS

语法

1. 使用组合选择器时，保持每个独立的选择器占用一行。
2. 为了代码的易读性，在每个声明的左括号前增加一个空格。
3. 声明块的右括号应该另起一行。
4. 每条声明应该只占用一行来保证错误报告更加准确。
5. 所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。
6. 逗号分隔的取值，都应该在逗号之后增加一个空格。
7. 不要在颜色值 rgb(), rgba(), hsl(), hsla(), 和 rect() 中增加空格
8. 不要在属性取值或者颜色参数前面添加不必要的 0 (比如，使用 .5 替代 0.5 和 -.5px 替代 0.5px)。
9. 所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。
10. 尽可能使用短的十六进制数值，例如使用 #fff 替代 #ffffff。
11. 为选择器中得属性取值添加引号，例如 input[type=“text”]。 他们只在某些情况下可有可无，所以都使用引号可以增加一致性。
12. 不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;。

声明顺序

相关的属性声明应该以下面的顺序分组处理：

1. Positioning
2. Box model 盒模型
3. Typographic 排版
4. Visual 外观
   Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
   例如：

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

媒体查询位置

尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。

不要使用 @import

与 相比, @import 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。应该避免使用他们，而选择其他的方案：

1. 使用多个 元素
2. 使用 CSS 预处理器例如 Sass 或 Less 将样式编译到一个文件中
3. 使用 Rails, Jekyll 或其他环境提供的功能，来合并 CSS 文件。

前缀属性

当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑。
例如：

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

单条声明的声明块

在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。
这样做的关键因素是错误检测 - 例如，一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行，那就是他了。在多个声明的情况下，你必须为哪里出错了费下脑子。

属性简写

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:

1. padding
2. margin
3. font
4. background
5. border
6. border-radius

大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

LESS 和 SASS 中的嵌套

避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。

LESS 和 SASS 中的运算符

为了提高代码可读性，在数学运算外增加括号，并且在取值，变量和运算符之间增加空格。
例如：

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

代码注释

代码是由人来编写和维护的。保证你的代码是描述性的，包含好的注释，并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。

Class 命名

1. 保持 Class 命名为全小写，可以使用短划线（不要使用下划线和 camelCase 命名）。短划线应该作为相关类的自然间断。(例如，.btn 和 .btn-danger)。
2. 避免过度使用简写。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。
3. Class 的命名应该尽量短，也要尽量明确。
4. 使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。
5. 命名时使用最近的父节点或者父 class 作为前缀。
6. 使用 .js-* classes 来表示行为(相对于样式)，但是不要在 CSS 中定义这些 classes。

选择器

1. 使用 classes 而不是通用元素标签来优化渲染性能。
2. 避免在经常出现的组件中使用一些属性选择器 (例如，[class^="…"])。浏览器性能会受到这些情况的影响。
3. 减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。
4. 只在必要的情况下使用后代选择器 (例如，没有使用带前缀 classes 的情况).

代码组织

1. 以组件为单位组织代码。
2. 制定一个一致的注释层级结构。
3. 使用一致的空白来分割代码块，这样做在查看大的文档时更有优势。
4. 当使用多个 CSS 文件时，通过组件而不是页面来区分他们。页面会被重新排列组合，而组件是可以移动的。

编辑器配置

根据以下的设置来配置你的编辑器，来避免常见的代码不一致和丑陋的 diffs。

1. 使用两个空格的 soft-tabs。
2. 在保存时删除尾部的空白字符。
3. 设置文件编码为 UTF-8。
4. 在文件结尾添加一个空白行。