本资源转自 伯乐在线 整理
这篇代码指南介绍了一系列HTML/CSS开发标准，指导我们编写更灵活、稳定、持久的代码。
黄金法则
不管项目成员有多少，一行代码不应由2个以上的人参与编写。
HTML
语法
- 使用双空格短缩进——只有这样才能保证代码能在所有渲染器中显示一致；
- 嵌套元素应用双空格缩进；
- 在属性中始终书写双引号；
- 自关闭元素不要使用斜杠结尾—但HTML5官方规范表示这是可选的；
- 书写标签时，不要忘了结尾的关闭符号（例如
</li>或</body>）。
HTML5文档类型
HTML页面的开头简单地定义文档类型，能强制浏览器使用标准模式渲染，保证页面效果统一。
语言属性
HTML5官方规范中说道：
开发者最好能在根级html元素中为文档指定一种语言属性，这样能帮助语音合成和翻译工具选择正确的语言进行发音和语法处理等等。
更多详情请阅读官方规范中
lang属性相关内容。点击可查看用于站点设置的语言代码列表。
IE兼容模式
IE支持
<meta>标签的文档兼容设置，允许其指定该页面使用何种版本IE进行渲染。除非碰上特殊情况，不然这应该是最合适的指导IE使用最新版本即edge mode的方式。更多详情请阅读Stack Overflow上这篇精彩的博文。
字符编码
声明特定的字符编码能确保你的内容被正确地渲染，这样做简单又快捷。如果字符编码跟文档相同（一般都是UTF-8），请不要在HTML中使用字符实体。
引用CSS和JavaScript文件
按照HTML5规范，一般来说，当CSS和JS文件被引用时，都会默认以
text/css和text/javascript的方式，没必要特意为其指定type类型。HTML5规范链接
实用比简洁更重要
HTML保持标准和语义是很重要的，但不要以牺牲实用性为代价，尽量不要用冗余或者复杂难懂的标记。
属性顺序
HTML属性应按照特定的顺序排列，以方便代码查阅。
classid,namedata-*src,for,type,href,valuetitle,altrole,aria-*Class能让我们更好地重用组件，所以它打头阵；id则更加特定和专属，应尽量控制其使用（例如：内页书签），因此排第二。
布尔属性
布尔属性一般都不存在声明值的必要，HTML5也是如此，而XHTML则要求必须要有值。
更多详情请阅读 WhatWG上关于布尔属性的段落 :
某一元素如果调用了布尔属性，则代表该值为真，否则为假。
如果你不得不引用一个无意义的值，你可以看看 WhatWG 怎么说：
如果调用了该属性，则值必须为空字符串或者属性别名两者之一，注意前后不要加空格。
简而言之，不要赋值就好。
减少标记
不管怎样，书写HTML时尽可能减少冗余的父元素。有时候可能需要迭代和重构，但起码能减少HTML代码量。你可以参照下面的例子：
JS生成标记
尽量不要JS文件里书写标记，这样做可能会让所示内容难以查阅以及编辑，导致性能降低。
CSS
CSS语法
- 使用双空格短缩进——只有这样才能保证代码能在所有渲染器中显示一致；
- 当成组使用选择器时，每个选择器单独一行；
- 一条声明的开大括号前留一空格；
- 声明的关闭右括号请新起一行；
- 每条引用声明冒号后留一个空格；
- 每条声明有单独的一行，以便错误报告更精确；
- 每条声明以分号结尾，最后一个可以没有，但这样容易出错；
- 以逗号分隔属性值之间，要在逗号后面保留一个空格（例如：
box-shadow）；- 在
rgb()、rgba()、hsl()、hsla()以及rect()属性值中逗号后不要加空格，这样能把多色彩值（逗号无空格）与多属性值的情况区分开来（逗号带空格）；- 省略掉属性值以及颜色参数的首位0（例如：用
.5代替0.5，用-.5px取代-0.5px）；- 十六进制值要用小写，像
#fff这样，当一个文档中有很多的字母时，小写字母更容易分辨；- 如果可以的话，简化十六进制值的写法，如用
#fff代替#ffffff；- 在选择器中引用属性值，例如：
input[type="text"]，在某些情况下可选是否使用，这样做也能更好地统一代码；- 零值不需要添加单位，例如：用
margin: 0;代替margin: 0px;；对以上规则有问题的话，可以参考维基百科层叠样式表语法部分。
声明顺序
有关联的属性声明之间应该按照以下顺序组在一起：
- 定位
- 盒模型
- 排字
- 视觉设计
定位摆在第一位，因为它能把元素从文档正常流中脱离出来，覆盖盒模型样式。而盒模型表示着组件的度量尺寸和摆放位置，因此排第二。排版和视觉都是属于元素内部的属性，不会影响到前两项，所以排为3、4。
完整的属性排序请参考 Recess（Twitter内部编码工具）。
请勿使用
@import相比起
<link>，@import调用更慢，不仅无端增加了额外的页面请求，还可能导致其他不可预见的问题。你可以选择以下任意一种方式来代替@import：
- 用
<link>引用文件；- 使用预处理器（如Sass或Less）把你的CSS代码编译到一个文件里；
- 利用Rails、Jekyll或其他平台功能把CSS文件串联起来。
更多详情请阅读 Steve Souders的这篇博文。
媒体查询语句位置
把媒体查询的语句尽可能放在跟它们密切相关的规则集旁边，不要把所有都单独提取出来，丢在在额外的样式表中，或者丢在文档尾部，这样只可能让其他人在之后忽视掉这条这些语句。下面是它的典型用法：
前缀属性
当使用浏览器前缀属性时，每个属性都应适当缩进，让数值纵向排列整齐，方便单次多行编辑。
如果你用Textmate，点击 文字 → 编辑选区内的每一行 (⌃⌘A)；如果是Sublime Text 2，则点击 选区 → 向前增加一行 (⌃⇧↑) 以及 选区 → 向后增加一行 (⌃⇧↓).
单条声明规则
在下面的例子中，每个元素都只有一条声明，这种情况就可以考虑去掉换行，以便于审读和修改。其他有不止一条声明的元素都应遵循上面提到的换行方式。
这样做的关键在于可以方便检查错误代码——例如，CSS检查器显示第183行有一处语法错误，如果声明是单行，那就是它没跑了；如果是多行，那么每条一行就很容易看出哪里有错了。
简写标记
为了明确所有值的有效性，应该尽量限制简写标记的使用。我们常常在以下属性上过度地使用了简写：
paddingmarginfontbackgroundborderborder-radius我们经常在不需要简写的时候用了简写，例如：HTML头部元素只需要设置
top和bottom的margin值。过分地重定义，让代码变得松散，可能会带来意料之外的副作用。对于简写属性的相关问题，Mozilla开发网站有篇文章讲的就是不常见的简写属性如何标记和使用，写的不错，可以参考。
Less/Sass的嵌套使用
不要使用无意义的嵌套，可以嵌套不代表着就应该这样做。只有当你所调用的样式需要回溯到父级、并且父级有多个子元素的情况下，再使用它。
扩展阅读：
Less/Sass的运算符
为了提高代码的可读性，请在所有数学运算两侧用圆括号包起来，值、变量、运算符之间用单空格隔开。
注释
代码说到底都是人编写和维护的，注释清晰，能让其他人更容易接受和协同合作。好的注释能传递代码的上下文、适用场景或者使用目的，只是简单地复述元件或类名是远远不够的。对于大型的组件，尽可能写完整详细的句子；而一般的标记，则可以简明扼要。
类名
- 类名请使用小写及破折号（不要用下划线或驼峰法）书写。破折号看上去更容易让人把相关的类名区分开来，例如：
.btn和.btn-danger。- 起简称时不要选多余或者多余的词，如：用
.btnis 表示 button 或许行得通，但.s就会不知所云了；- 类名尽可能简短明了；
- 起有意义的名字，多考虑名称结构和目的性，展示性屈居其次；
- 以最有关联的父级或基础元素作为前缀；
- 用
.js-*前缀作为类名来突显元素的功能性（而非样式），但这种名称别用在CSS里。这些规则也同样适用于Sass及Less的变量起名。
选择器
- 为了更好的显示性能，请使用类名而非一般的元素标签；
- 对于经常使用的组件，不要使用多个属性选择器，这样调用对浏览器性能有不小影响；
- 尽可能保持简短，如果可以请限制在3个元素以内；
- 只有在不得已的情况下再回溯最近的父级元素（例如：类名无前缀时）；
扩展阅读：
架构
- 用元件把代码分组；
- 注释也要有统一连贯的层级样式；
- 使用一致的空格及换行，便于浏览大型代码文档；
- 当你同时需要操作多个CSS文件时，把它们通过元件分解开来，而非页码。页码不可靠，很可能会因为内容的调整和删减而变化。
编辑器偏好设置
编辑器按如下设置，可以让你减少不必要的冗余和不稳定因素：
- TAB键设为双空格；
- 存储时删除行尾空格；
- 用UTF-8编码；
- 文件末尾自动增加新行；
你可以试着记下来这些设置，并应用在你的项目中
.editorconfig文件里，例如： Bootstrap的设置。阅读更多内容请查看EditorConfig简介。
01-23
245
245
09-27
04-20
467
467
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
