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