HTML编码规范

github上找的百度总结的前端编码规范。

1、代码风格

》》缩进与换行。

【强制】使用四个空格作为一个缩进层级，不允许使用两个空格，或者Tab字符。

  示例：

     	<ul>
            <li>first</li>
            <li>second</li>
     	</ul>

                【建议】每行不得超过120个字符。原因：过长的代码，不利于维护，但是考虑到HTML的特殊性，不做强制要求。

》》命名

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

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

示例：

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

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

【强制】id必须保证页面唯一。原因：同一个页面中，不同的元素包含相同的id，不符合id的属性含义。并且使用document.getElementById()。时可能导致难以追查的问题。

【建议】id建议单词全字母小写，单词间以” - “分隔，并且同项目必须保持风格一致。

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

示例：

	<!-- good -->
	<div id="nav"></div>
	<!-- bad -->
	<div id="navigation"></div>

	<!-- good -->
	<p class="comment"></p>
	<!-- bad -->
	<p class="com"></p>

	<!-- good -->
	<span class="author"></span>
	<!-- bad -->
	<span class="red"></span>

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

解释：不允许class只用于让JavaScript选择某些元素，class应该具有明确的语义和样式。否则容易导致CSS class泛滥。使用id、属性选择作为hook是更好的方式。

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

解释：IE浏览器会混淆元素的id和name属性。document.getElementById()时会获得不期望的元素。所以在对元素的id和name命名时要格外小心。

   一个较好的实践方法是，name跟id采用不同的命名法。

示例：

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

未完，会接着更新。

github链接：https://github.com/ecomfe/spec/blob/master/html-style-guide.md