这篇文章发布于 2013年01月4日，星期五，15:59，归类于 HTML相关, 外文翻译。 阅读 75718 次, 今日 5 次 25 条评论
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.350)
- 疑问：为什么要使用href="javascript:void(0);"？ (0.246)
- ol元素及相关属性:type, start, value, 和reversed (0.233)
- 残忍：IE10↘IE7-IE9 type=email的完全抛弃 (0.233)
- 梳理：提高前端性能方面的处理以及不足 (0.233)
- 精简高效的CSS命名准则/方法 (0.113)
- jQuery之addClasas与removeClass使用实例 (0.100)
- CSS+JavaScript实现页面不同布局的切换 (0.100)
- 有趣：256个class选择器可以干掉1个id选择器 (0.100)
- 聊聊JS DOM变化的监听检测与应用 (0.100)
- 了解HTML/HTML5中的download属性 (RANDOM - 0.013)
我的应用
我的应用
自闭元素(img, br)不要包含斜杠。这条不一样啊，不是说这种元素后面要加一个斜杠吗？到底加还是不加呢？
自己也是用 class=”” id=”” xxx=”” 这种顺序，很符合css的层叠，最近更新了emmet，有个好像叫merge的功能，inline-block空隙没有了，测试再也不用担心我的bug
1，布尔属性无值（如checked而不是checked=”checked”）—- 闹哪样，我迷茫了？
2，自闭元素(img, br)不要包含斜杠。—-老外果然是不用兼容低版本的浏览器，不是建议加空格斜杠吗？
3，如果使用空格，选定一个缩进字符值。（个人偏好：4空格）—–一个tab键解决的问题，为什么非要敲四下？
4，
[文字]
这样写整段代码巨长，现在的电脑都是宽频的，唉，闹哪样？
5 .is-scrollable {
overflow: auto;
} 我记得命名好像不建议使用中划线的，建议使用下划线，我记错了？我真的错乱了。
6，省略link样式表、style以及script元素的type属性。老外真先进，我记得《javascript高级程序设计》一书上建议保留type，唉，完全错乱了
浏览器的思想是在于接受更多的东西，像拖个mp3，图片这些进浏览器，它也会播放和显示。但它明明是浏览器。理由就像前面说的，其它的问题都是个人风格习惯的问题，没有谁对谁错
2.自闭元素提倡无斜杠，这是基本公认的前端规范了
3.tab在不同的编译器下会有不同缩进距离，规范一种（空格虽然麻烦但是稳定），不过sublime可以设置一个TAB换算成多少个空格，也是比较方便的。
5.class的命名用中划线，比如 .head-nav，变量名驼峰法 var headNav 函数名首字母大写function HeadNav();
6.和2一样，也是现在公认的比较流行的H5写法了，不必写type=”text/css/javascript”
多看看给github，多看看别人写的源码，你就不会这么说了
wa sai 楼主下次一定挑一些好点的文章翻译，挑一些公认的技术大家的文章翻译。
这样既可以节约楼主宝贵的时间，也可以节约我们读者宝贵的时间。
楼主的翻译质量一直不错，这事这篇文章实在不敢恭维。
呃，如果你不能接受新规范新知识，自己什么都不懂，停留在你以前记得，以前看过的阶段，就来评论说不敢恭维，那就停留在你的水平吧
追随博主的分享，可以学到好多东西…
不知是我今天眼睛不舒服，还是博主的文字太小，看文章一直都在揉眼睛…
我也觉得自关闭元素应该加斜线最后。。。
考一下鑫哥哈~
jQuery里面.attr()和.prop()是什么区别？
不许搜索哦
@Michael J. .prop()貌似是为一些布尔属性，如以前的checked, disabled, 现在的required等设计的。
@张鑫旭 嗯，知道了，谢谢！通用类因为高度重用，所以命名从简^_^
有一个疑问，您的 CSS 代码库里会有诸如 l, r, fix, ml10… 等类命名，与上述“五、命名”有所冲突，请问如何权衡？谢谢
@华晨 命名这块根据内容的性质（公用/独用、简单/复杂）决定何种命名。一棒子打死的说法都是不对的。
img,br不加斜线不好吧
有什么不好?
1、布尔属性无值（如checked而不是checked=”checked”）。
2、省略link样式表、style以及script元素的type属性。
3、自闭元素(img, br)不要包含斜杠。
这3个貌似没必要过于纠结，整体风格统一就好（前提：可以通过html validator认证；我先在页头还“必须”是能触发IE混杂模式的才行 :(）
自闭元素(img, br) 斜杠我觉得还是加上好些。
三、格式, 这里的建议前提是你使用html5文档声明，假如不是就很有问题了
关于html的缩进:
每个嵌套元素使用一个额外的缩进。
我是一直有纠结JSTL的标签是否也应该额外缩进.比如:
…
不过这是个小问题
谢谢博主分享，能否简单说一下下面三点的原因：
1、布尔属性无值（如checked而不是checked=”checked”）。
2、省略link样式表、style以及script元素的type属性。
3、自闭元素(img, br)不要包含斜杠。
@artwl 原因一样，面向未来，遵循新规范。
自闭元素(img, br)不要包含斜杠。我记得是需要的啊？
@深蓝 确实需要，不过那是之前，现在面向HTML5，是不需要的。