首页 > 代码库 > HTML和CSS的代码编写规范
HTML和CSS的代码编写规范
在很多开发人员眼里，编码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="http://www.mamicode.com/xxx.css">
<script src="http://www.mamicode.com/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="http://www.mamicode.com/#">link</a>
<img src="http://www.mamicode.com/xxx" alt="xxx">
<input class="xxx" type="text">
5、布尔型属性
布尔型属性在声明时，可以不赋值。
原因：XHTML规范要求要赋，但是HTML5规范不需要。更多信息查看
eg.
<input type="text" disabled>
<option value="http://www.mamicode.com/1" selected>1</option>
<input type="checkbox" value="http://www.mamicode.com/1" checked>
6、其他细节
（1）自闭元素在尾部不要添加斜线。参见HTML规范。eg.<img src="http://www.mamicode.com/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、尚未注意到的
2、这么干的-但模棱两可的
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 【？？这不就是我经常简写的么】
6、class命名
eg. .btn .btn-danger
（2）避免过多简写，比如 .btn 代表 button，但是 .s 就啥也不是
（3）class应尽可能短 & 意义明确
（4）要有意义：要有组织+有目的，不要用表现形式
（5）class的前缀：基于最近的父或基 作为新class的前缀
（6）用js-的class：来标识行为，与样式相对：且不应用到css中（同理：纯css样式的，也尽量不要用于脚本-不便于维护）
7、CSS选择器
（2）经常出现的组件，避免使用属性选择器：影响浏览器性能 【各个选择器的性能如何？？】
（3）尽可能短：建议不要超过3个
（4）只有在必要的时候，才将class限制在最近的父元素内（及后代选择器） 【选择器并非越长越好】
8、代码组织
（2）如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。 【？页面会被重组，而组件只会被移动】
（3）制定一致的注释规范。
（4）使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
9、代码注释
（2）好的注释：传达上下文关系、代码目的 （而不是很苍白地重申些废话）
（3）可以英文注释（长的写完整句子，短的就可以写短语）
10、其他
（1）不要使用@import
因为：@import指令要比<link>标签慢很多（不光增加了额外的请求次数，还会导致不可预料的问题）
可替代的方法：
a.用多个<link>
b.通过Sass或Less类似的CSS预处理器将多个CSS文件编译成一个文件
c.将CSS文件合并
（2）媒体查询的位置 【移动开发会较多】
建议：将放在尽可能相关规则的附近
不要将它们打包放在一个单一样式文件 or 文档底部
（3）Less和Sass中的嵌套 【表示...不曾用过】
避免非必要的嵌套：你可以使用，但并不意味这应该使用
什么时候用嵌套：限制在父元素内（即后代选择器）+ 多个需要嵌套时才用
参考及扩展阅读