编码规范 —— 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范

时间 2019-11-07

标签编码规范编写灵活稳定高质量 html css 代码栏目字符编码繁體版

原文原文链接

黄金定律

永远遵循同一套编码规范 - 能够是这里列出的，也能够是你本身总结的。若是发现规范中有任何错误，敬请指正。javascript

HTML

语法

用两个空格代替制表符 (tab)，这是惟一能保证在全部环境下得到一致展示的方法。css
嵌套元素应当缩进一次（即两个空格）。html
对于属性的定义，确保所有使用双引号，毫不要使用单引号。java
不要在自闭合 (self-closing)元素的尾部添加斜线 —— HTML5规范中明确说明这是可选的。git
不要省略可选的结束标签 (closing tag)，如 </li> 或 </body>。github

HTML5 doctype

为每一个HTML5页面的第一行添加标准模式（standard mode）的声明，这样可以确保在每一个浏览器中拥有一致的展示。浏览器

语言属性

强烈建议为 HTML 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具肯定其所应该采用的发音，有助于翻译工具肯定其翻译时所应该遵照的规则等等。sass

例如：<html lang="zh-CN"></html>less

IE兼容模式

IE 支持经过特定的 meta 标签来肯定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊要求，不然最好是设置为 edge mode，从而通知IE采用其所支持的最新模式。编辑器

字符编码

经过明确声明字符编码，可以确保浏览器快速并容易的判断页面内容的渲染方式。这样作的好处是，能够避免在 HTML 中使用字符实体标记（character entity）,从而所有与文档编码一致（通常采用 UTF-8 编码）。

引入 CSS 和 JavaScript 文件

引入 CSS 和 JavaScript 文件时通常不须要指定 type 属性，由于 text/css 和 text/javascript 分别是它们的默认值。

实用为王

尽可能遵循 HTML 标准和语义，可是不要以牺牲实用性为代价，任什么时候候都要尽可能使用最少的标签并保持最小的复杂度。

属性顺序

HTML属性应当按照如下给出的顺序依次排列，确保代码的易读性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

布尔（boolean）型属性

简单来讲就是不用赋值。

减小标签的数量

编写 HTML 代码时，尽可能避免多余的父元素，不少时候，这须要迭代和重构来实现。

JavaScript 生成的标签

经过 JavaScript 生成的标签让内容变得不易查找、编辑，而且下降性能。能避免时尽可能避免。

CSS

用两个空格代替制表符（tab）这是惟一能保证在全部环境下得到一致展示的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每一个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
为了得到更准确的错误报告，每条声明都应该独占一行。
全部的声明语句都应当以分号结尾，最后一条声明语句后面的分号是可选的，可是，若是省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性，每一个逗号后面都应该插入一个空格（如 box-shadow）。
不要在 rgb(), rgba(), hsl(), hsla(), 或 rect() 值的内部的逗号后面插入空格。
对于属性值或颜色参数，省略小于 1 的小数前面的 0（如 .5 代替 0.5；-.5 代替 -0.5px）。
十六进制值应该所有小写，如 #fff。在扫描文档时，小写字符易于分辨，由于他们的形式更易于区分；
尽可能使用简写形式的十六进制值，例如用 #fff 代替 #ffffff。
为选择其中的属性添加双引号，如 input[type="text"]。
避免为0指定单位。

声明顺序

position
box model
typographic (一些轮廓样式)
visual (内部样式)

因为定位（positioning）能够从正常的文档流中移除元素，而且还能覆盖盒模型（box model）相关的样式，所以排在首位。盒模型排在第二位，由于它决定了组件的尺寸和位置。

其余属性只是影响组件的内部（inside）或者是不影响前两组属性，所以排在后面。

带前缀的属性

当使用特定厂商的带有前缀的属性时，经过缩进的方式，让每一个属性的值在垂直方向对齐，这样便于多行编辑。

单行规则声明

对于只包含一条声明的样式，为了易读和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，仍是应当将声明分为多行。

这样作的关键因素是为了错误检测。例如，css 校验器指出在 183 行有语法错误。若是是单行声明，你就不会忽略这个错误；若是是单行多条声明的话，你就要仔细分析避免漏掉错误了。

简写形式的属性声明

在须要显示地设置全部值得状况下，应当尽可能限制使用简写形式的属性声明，常见的滥用简写属性声明的状况以下：

padding; margin; font; background; border; border-radius;

大部分状况下，咱们不须要为简写的属性声明指定全部值。过分使用简写形式的属性声明会致使代码混乱，而且会对属性值带来没必要要的覆盖而引发意外的反作用。MDN 上一篇很是好的关于 shortand properties 的文章，对于不太熟悉简写属性声明及其行为的用户颇有用。

less 和 sass 中的嵌套

避免非必要的嵌套，这是由于虽然你可使用嵌套，可是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），而且存在多个须要嵌套元素时才使用嵌套。

注释

代码是由人编写并维护的。请确保你的代码可以自描述、注释良好而且易于他人理解。好的代码注释可以传达上下文关系和代码目的。不要简单地重申组件或 class 名称；对于较长的注释，务必书写完整的句子；对于通常性注释，能够书写简介的短语。

class 命名

class 名称中只能出现小写字符和破折号（不是下划线也不是驼峰命名法）。破折号应当用于相关 class 命名（如 .btn 和 .btn-danger ），避免过分任意的简写。.btn 表明 button ，可是 .s 不能表达任何意思。

class 名称应当尽量短，而且意义明确。
使用有意义的名称。使用有组织的或者目的明确的名称，不要使用表现形式的名称。
基于最近的父 class 或基本 (base) class做为新 class 的前缀。
使用 .js class 来标识行为（与样式相对），而且不要将这些class包含到css文件中。

选择器

对于通用元素使用 class，这样利于渲染性能的优化。
对于常常出现的组件，避免使用属性选择器，浏览器的性能会受到这些因素的影响。
选择器要尽量短，而且尽可能限制组成选择器的元素个数，建议不要超过3.
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）

代码组织

已组件为单位组织代码
指定一致的注释规范
使用一致的空白符将代码分隔成块，这样利于扫描较大的文档
若是使用了多个 css 文件，将其按照组件而非页面的形式拆分，由于页面会被重组，而组件只会被移动。

编辑器配置

将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差别：

用两个空格代替制表符
保存文件时删除尾部的空白符
设置文件编码为 UTF-8
在文件结尾添加一个空白行。

原文连接

工做也有些时日了，本身也整理了一份还不完善的规范文档