HTML CSS编码规范

HTML编码规范

只记录一些我认为比较容易忘记的，方便日后复习查看。

1. 缩进与换行

[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
[建议] 每行不得超过 120 个字符。

2. 命名

[强制] class 必须单词全字母小写，单词间以 - 分隔。
[强制（很重要）] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
[建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。
[建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。
[强制] 禁止为了 hook 脚本，创建无样式信息的 class。
[强制] 同一页面，应避免使用相同的 name 与 id。

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

3. 标签

[强制] 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。
[强制] 标签使用必须符合标签嵌套规则。
[建议] HTML 标签的使用应该遵循标签的语义。
下面是常见标签语义

p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表

例如：

<!-- good -->
<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>

<!-- bad -->
<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>

4. 属性

[强制] 属性值必须用双引号包围。
[建议] 布尔类型的属性，建议不添加属性值。
[建议] 自定义属性建议以 xxx- 为前缀，推荐使用 data-。
解释：
使用前缀有助于区分自定义属性和标准定义的属性。

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<ol data-ui-type="Select"></ol>

5. 通用

[建议] 启用 IE Edge 模式。
[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
[强制] 引入 CSS 时必须指明 rel=“stylesheet”。
[建议] 引入 CSS 和 JavaScript 时无须指明 type 属性。
[建议] 在 head 中引入页面需要的所有 CSS 资源。
[建议] JavaScript 应当放在页面末尾，或采用异步加载。

6. Head

[强制] 页面必须包含 title 标签声明标题。
[强制] title 必须作为 head 的直接子元素，并紧随 charset 声明之后。
[强制] 保证 favicon 可访问。
解释：
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：

在 Web Server 根目录放置 favicon.ico 文件。
使用 link 指定 favicon。

<link rel="shortcut icon" href="path/to/favicon.ico">

[建议] 若页面欲对移动设备友好，需指定页面的 viewport。
[强制] 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
[建议] 为重要图片添加 alt 属性。
解释：
可以提高图片加载失败时的用户体验
[建议] 添加 width 和 height 属性，以避免页面抖动。
[建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

7. 表单

[强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。
有两种方式：
将控件置于 label 内。
label 的 for 属性指向控件的 id。
推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

[强制] 使用 button 元素时必须指明 type 属性值。
解释：
button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。
[建议] 尽量不要使用按钮类元素的 name 属性。
解释：
由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。具体情况可参考。
[建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。
[建议] 当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作。
[建议] 在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性。
解释：
根据内容类型指定输入框类型，能获得能友好的输入体验。

CSS编码规范

只记录容易忽略的

1. 空格

[强制] 选择器 与 { 之间必须包含空格。
[强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
[强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。

.selector {
	margin: 0;
	font-family: Arial, sans-serif;
}

2. 行长度

[建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。
[强制] 每行不得超过 120 个字符，除非单行不可分割。

3. 选择器

[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 属性缩写

[建议] 在可以使用缩写的情况下，尽量使用属性缩写。

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

5. 属性书写顺序

[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等

6. 清除浮动

[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
释：
触发 BFC 的方式很多，常见的有：

float 非 none
position 非 static
overflow 非 visible

7. z-index

[建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。
[建议] 在可控环境下，期望显示在最上层的元素，z-index 指定为 999999。
[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647。

8. 数值

[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。
[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)

9. 颜色

[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
[强制] 颜色值不允许使用命名色值（如lightblue）。
带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

10. 字号 字体风格 字重 行高

[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。
[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。
[强制] font-weight 属性必须使用数值方式描述。
解释：

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。

/* good */
h1 {
    font-weight: 700;
}

/* bad */
h1 {
    font-weight: bold;
}

[建议] line-height 在定义文本段落时，应使用数值。
解释：
将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。
当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

11. 变换与动画

[强制] 使用 transition 时应指定 transition-property。

/* good */
.box {
    transition: color 1s, border-color 1s;
}

/* bad */
.box {
    transition: all 1s;
}

[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。
见本文，在可能的情况下应选择这样四种变换：

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0…1;

/* good */
.box {
    transition: transform 1s;
}
.box:hover {
    transform: translate(20px); /* move right for 20px */
}

/* bad */
.box {
    left: 0;
    transition: left 1s;
}
.box:hover {
    left: 20px; /* move right for 20px */
}

12. 响应式

[强制] Media Query 不得单独编排，必须与相关的规则一起定义。
[强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。

@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
    /* Retina-specific stuff here */
}

13. 兼容性

[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。
解释：
标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。

.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

14. Hack

[建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。
[建议] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack。
[建议] 尽量使用简单的 属性 hack。

15. Expression

[强制] 禁止使用 Expression。
本文规范全部来自与下方链接处。
参考地址：https://github.com/ecomfe/spec/blob/master/html-style-guide.md