HTML编码规范

本篇文章是基于王叨叨大佬师父维护的文档梳理的，有兴趣可以去看一下原文HTML编码规范。

1. 缩进与换行

【建议】 使用 2 个空格作为一个缩进层级，不允许使用tab字符

解释：

​ 具体项目，可以使用2个空格，也可以使用4个空格，依据组内的规范定，但项目内部要统一。

​ 为啥可以用4个空格而不能用tab字符呢？因为虽然tab字符和4个空格表面上看起来实现的效果是一样的。但是在不同的编辑器里tab的长度可能不一样。这会导致有tab字符的代码，用不同的编辑器打开时，格式可能会乱。但是，敲一下tab肯定比敲四下空格的效率要高。目前，很多编辑器都能够将tab字符设置成4个空格（敲一下tab相当于敲了4个空格）。

【强制】 对于style和script中的代码，一级缩进要与style和script标签缩进同级

<!--  样式内容的一级缩进与所属的 style 标签对齐  -->
<style>
.main {
    color: red;
}
</style>

<!-- 脚本代码的一级缩进与所属的 script 标签对齐 -->
<script>
document.write("Hello World!");
</script>

【建议】 每行不得超过 120 个字符。

解释：

​ 过长的代码不容易阅读与维护。

2. 命名

【强制】 id、class 必须全字母单词小写，单词间以 - 分隔。

【强制】 class 必须代表相应模块或部件的内容及功能，不得以样式信息进行命名。

示例：

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

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

【强制】 id必须保证页面的唯一。

【强制】 同一页面，应避免使用相同的name和id。

解释：

​ IE浏览器比较低的版本会混淆元素的 id 和name属性。如此document.getElementById 获取的就不是期望中的结果。

示例：

<input name="foo">
<div id="foo"></div>
<script>
alert(document.getElementById('foo').tagName);
</script>

 ​ 正常应该显示DIV，但在IE7浏览器下显示的却是INPUT。

【建议】 id、class命名，在避免冲突并描述清楚的前提下尽可能短。

【强制】 禁止为了hook脚本，创建无样式信息的class。

解释：

​ hook机制：简单来说就是提前列出所有可能的情况，减少if-else的使用。

​ 不允许 class 只用于JS选择某些元素，class应该具有明确的语义和样式。否则容易导致CSS样式泛滥。

​ 使用id、属性选择作为hook是更好的方式。

3. 标签

【强制】 标签名必须使用小写字母