HTML和CSS的代码编写规范

浏览数：22 / 时间：2015年06月09日

在很多开发人员眼里，编码HTML简直容易极了，编写CSS不但简单有时还会显得很繁琐-相同的属性得一个劲不停地写。为此，曾经自己也迷惑过也遇到过不少问题，但随着写&读的前端代码渐渐增多，慢慢体会到，“能写”和“会写”之间还是有一定距离的。很多时候，你可以“这样做”，但并不意味着“你应该”这么做。

合理地编写HTML和CSS，可以让代码看起来更专业。即便是很简单的几行代码，也要写的有性格。嗯~用饱含工匠精神的态度去写码，你一定会在苦逼中作乐的。

以下整理些从别人那读到学到的，同时自己认可的琐碎的点，供实战中践行。

HTML

1、标准模式声明

HTML页面第一行，添加标准模式的声明。eg. <!DOCTYPE html>
原因：可确保在每个浏览器中拥有一致的表现。

2、字符编码

要明确声明。eg.<meta charset="UTF-8">
原因：明确声明字符编码，可确保浏览器快速&容易判断用哪种方式去渲染页面内容。

3、引入CSS 和 JavaScript 文件时

　　不需要指定type属性。
　　原因：跟据HTML5规范，"text/css"和"text/javascript"分别都是默认值
　　eg.<link rel="stylesheet" href="xxx.css">
　　 <script src="xxx.js"></script>

4、HTML属性的书写顺序

建议按照以下顺序排列，可读性好。

（1）class：class用于标识高度可复用组件，所以排首位
（2）id, name：id用于标识具体组件，所以排第二。
（3）data-*
（4）src, for, type, href
（5）title, alt
（6）aria-*, role
eg.
<a class="xxx" id="xxx" data-index="x" href="#">link</a>
<img src="xxx" alt="xxx">
<input class="xxx" type="text">

5、布尔型属性

布尔型属性在声明时，可以不赋值。
原因：XHTML规范要求要赋，但是HTML5规范不需要。更多信息查看
eg.
<input type="text" disabled>
<option value="1" selected>1</option>
<input type="checkbox" value="1" checked>

6、其他细节

（1）自闭元素在尾部不要添加斜线。参见HTML规范。eg.<img src="xxx.jpg">。参考 HTML5规范

（2）成对的标签，结束标签一定要有。

（3）定义属性时，建议用双引号，不要用单引号。

（4）尽量减少标签数量：任何时候都要尽量使用最少的标签 & 保持最小的复杂度。

尽量减少标签数量、尽量避免多余的父元素。
很多时候，这需要迭代和重构来实现。所以，当写完“实现功能”的代码后，不妨自己再通读下自己的代码（往往这个时候，可发现挺多可优化的点。嗯~因为关注点不同：前者重在功能，后者重在重构。）

（5）尽量不要用js生成标签

原因：这样会让内容变得不易查找不易编辑，且降低性能。

7、其他：待进一步考证

只因自己平时没碰到类似的场景，所以不好做判断。。。

（1）强烈建议为html根元素指定lang属性。lang属性，可参考规范

原因：为文档设置正确的语言，有助于语音合成工具确定该怎么发音，有助于翻译工具确定该用啥规则等等。
关于lang属性的知识，点击查看规范。

（2）IE兼容模式

IE支持通过特定的<meta>来确定绘制当前页面所应该采用的IE版本。
建议设置edge mode，从而通知IE采用其所支持的最新模式。stack overflow上有篇文章谈了这个。

CSS

1、尚未注意到的

（1）对于以逗号分隔的属性值：每个逗号后，都应该插个空格。eg. background-image: url(...), url(...);

（2）值内部的多个属性之间：不要加空格

（3）选择器中的属性：建议都加双引号，为了一致性（而且还有其他原因）

2、这么干的-但模棱两可的

（1）避免为0指定单位：margin:0 即可

（2）值小于1的，省略小数前面的0：即 -.5px代替 -0.5px，.5代替0.5

（3）十六进制值-全部小写：扫描文档时，小写字符易于分辩

3、平时就遵守着的

（1）每条声明-最好独行：更准确的错误报告
（2）若有选择器分组，每个单独成行
（3）空格：声明的左花括号之前；属性值前
（4）所有声明语句后，都写分号 <虽然最后一条声明语句后的分号;是可选的>
（5）16进制尽量简写：eg. #fff 而不是#ffffff

4、CSS声明顺序

相关的属性声明归为一组，按照下面的顺序排列：
（1）定位 positioning：可以从正常的文档流中移除元素，还能覆盖盒模型的相关样式，所以首位。
（2）盒模型 box model：决定了组件的尺寸和位置，所以第二位。
（3）排版类 typographic
（4）视觉类 visual

5、简写形式的属性

在需要显示地设置所有值的情况下，应尽量限制使用简写的属性声明。
常见的滥用：
padding, margin, font, background, border, border-radius 【？？这不就是我经常简写的么】

大部分情况下，我们不需要为简写形式的属性声明指定所有值。

例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。

过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

6、class命名

（1）只能出现：小写字符和波折号-（破折号应该用于相关的class命名，类似于命名空间）而不是下划线也不是驼峰
eg. .btn .btn-danger
（2）避免过多简写，比如 .btn 代表 button，但是 .s 就啥也不是
（3）class应尽可能短 & 意义明确
（4）要有意义：要有组织+有目的，不要用表现形式
（5）class的前缀：基于最近的父或基作为新class的前缀
（6）用js-的class：来标识行为，与样式相对：且不应用到css中（同理：纯css样式的，也尽量不要用于脚本-不便于维护）