by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2896
//zxx: 以下为翻译全文 ——–
一、一般原则
- 所有的代码应看似出自一人之手，即使奶妈有多人。
- 严格执行约定的风格。
- 若风格不定，使用现有、常用风格。
二、空白
你的整个源代码应该只存在一种风格。空白使用前后一致，使用空白提高可读性。
- 到死也不要混用空格符(spaces)和制表符(tabs)实现缩进。
- 柔和缩进(spaces)或真实制表二选一，关键要一站到底。（个人偏好：空格-spaces）
- 如果使用空格，选定一个缩进字符值。（个人偏好：4空格）
小提示：你可以配置编辑器“显示不可见”(“show invisibles”)，此举可用来消除结束行的空白，避免违背上面（坚持一种缩进）的承诺。
三、格式
- 标签以及属性名称总是小写。
- 一行一个不连续元素。
- 每个嵌套元素使用一个额外的缩进。
- 布尔属性无值（如
checked而不是checked="checked"）。 - 属性值总是使用双引号引起来。
- 省略
link样式表、style以及script元素的type属性。 - 总是包含结束标签。
- 自闭元素(
img,br)不要包含斜杠。
（每行长度保持一个最大的合理值，例如 80列）
例如：
<div class="tweet"> <a href="path/to/somewhere"> <img src="path/to/image.png" alt=""> </a> <p>[微博文字]</p> <button disabled>回复</button> </div>
异常和轻微的偏差
元素含有多个属性，可以跨多行排版，以努力提高可读性以及提供更多有用的差异。
如：
<a class="[value]" data-action="[value]" data-id="[value]" href="[url]"> <span>[文字]</span> </a>
四、属性顺序
HTML属性应该以特定的属性排列，（如下）这可以某种程度上反应类名是主要接口——用做CSS以及JavaScript选择元素
classiddata-*- 其他
例如：
<a class="[value]" id="[value]" data-name="[value]" href="[url]">[文字]</a>
五、命名
命名很难，但很重要。这是开发一个可维护的代码库重要的组成部分，并确保您HTML和CSS/JS见有个可伸缩的接口。
- 使用清晰，周到，适当的HTML类名。名称应该体现HTML和CSS文件的信息。
- 避免很系统地使用类名缩写，这会让事情变得难以理解。
下面是糟糕的命名：
<div class="cb s-scr"></div>
.s-scr { overflow: auto; } .cb { background: #000; }
这是更好一点的命名：
<div class="column-body is-scrollable"></div>
.is-scrollable { overflow: auto; } .column-body { background: #000; }
六、实例
含各种约定的例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档</title> <link rel="stylesheet" href="main.css"> <script src="main.js"></script> </head> <body> <article class="post" id="1234"> <time class="timestamp">2013年1月4日</time> <a data-id="1234" data-analytics-category="[value]" data-analytics-action="[value]" href="[url]">[文本]</a> <ul> <li> <a href="[url]">[文本]</a> <img src="[url]" alt="[文本]"> </li> <li> <a href="[url]">[文本]</a> </li> </ul> <a class="link-complex" href="[url]"> <span class="link-complex__target">[文本]</span> [文本] </a> <input value="text" readonly> </article> </body> </html>
//zxx: 以上为翻译全文 ——–
大家可以根据自己的实际情况，提炼出有帮助的信息。
翻译水平有限，文中要是有不准确之处，欢迎指正。
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2896
（本篇完）
相关文章
- 需警惕CSS3属性的书写顺序 (0.351)
- 疑问：为什么要使用href="javascript:void(0);"？ (0.245)
- ol元素及相关属性:type, start, value, 和reversed (0.234)
- 残忍：IE10↘IE7-IE9 type=email的完全抛弃 (0.234)
- 梳理：提高前端性能方面的处理以及不足 (0.234)
- 精简高效的CSS命名准则/方法 (0.112)
- jQuery之addClasas与removeClass使用实例 (0.100)
- CSS+JavaScript实现页面不同布局的切换 (0.100)
- 有趣：256个class选择器可以干掉1个id选择器 (0.100)
- 聊聊JS DOM变化的监听检测与应用 (0.100)
- 小tips: 点击页面出现富强、民主这类文字动画效果 (RANDOM - 0.011)