HTML/CSS 通用规则
编码规则
省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，减小文件字节数。
其它协议（ftp 等）的 URL 不省略。
<!-- Recommended --> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Not recommended --> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
避免使用层级过深的文件夹，以提高文件查找效率、减小文件体积。
代码格式####
使用小写字母
<!-- Recommended --> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="google.png" alt="Google"> <!-- Not recommended --> <A HREF="/">Home</A>
删除行尾空格
HTML风格指南
编码规则
*文档类型（DTD）使用 HTML5
<!DOCTYPE html>
语言属性
head 头标签
HTML有效性与语义化
使用符合 HTML5 规范的标签，不允许使用废弃的标签，如
<font>、<center>等。根据 HTML 各元素设计的用途使用他们。这事关可访性、重用以及代码效率，例如
h1-h6用于标题，<p>用于段落，<a>用于链接。使用 HTML5 语义化标签。
HTML5 element list
关注分离：结构、表现、行为分离
严格保持结构 （标记），表现 （样式），和行为 （脚本）分离, 并尽量让三者之间的交互保持在最低限度。
确保文档和模板只包含 HTML 结构， 所有表现都放到样式表里，所有行为都放到脚本里；
尽量将脚本和样式合并到一个文件，减少外链。
省略样式表和脚本的 type 属性
使用 CSS 的样式表、使用 JavaScript 的脚本都不需要添加 type 属性。HTML5 默认按照 text/css 及 text/javascript 解析，兼容较老的浏览器。
<!-- Recommended --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> <!-- Not recommended --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- Recommended --> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Not recommended --> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
布尔值属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
HTML代码格式
基础格式
每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进。
纯文本在 HTML 标签结束之前不要换行。
HTML 属性值使用双引号。
CSS风格指南
编码规则
不要使用 @import
与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
ID、Class 命名
ID、Class 使用语义化、通用的命名方式。
只允许使用的小写字母、连字符、数字；
应该从 ID 和 Class 的名字上就能看出这元素是干嘛用的（角色、功能、状态），而不是表象（颜色、位置等）或模糊不清的命名；
表明、反映元素作用的名字易于理解，且后期修改的可能性小；
对与同级元素相比没有特殊的意义的元素使用通用的命名；
使用功能性或通用的名字可以减少不必要的文件修改。
避免元素选择器和 ID、Class 叠加使用
出于性能考量，在没有必要的情况下避免元素选择器叠加 ID、Class 使用。
元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。
属性值为 0 时省略单位
margin: 0; padding: 0;
使用rem作为字号、长度单位
使用 px对可访性会造成一定的问题，em 则随着上下文不断变化，计算较为繁杂。
推荐使用 rem：Font sizing with rem
需要 1px 级别精准定位的，仍然使用
px；需要根据字号变化的（如 padding、margin 等）场景使用可以使用 em，较少不必要的代码。
根据项目在 ID、Class 前面加上特定前缀（命名空间）
命名空间可以防止命名冲突，方便维护（查找和替换）。
.backend-xxx {}使用连字符 - 作为 ID、Class 名称界定符
CSS 中不要驼峰命名法和下划线。
元素在页面中仅仅出现一次的，应该使用 ID，否则使用 Class。
CSS 代码格式
属性声明顺序
推荐的样式编写顺序：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }字体名称
字体名称请映射成对应的英文名，例如：黑体(SimHei) 、宋体(SimSun) 、微软雅黑(Microsoft Yahei)。
如果字体名称中有空格，则必须加引号。
JavaScript 语言规范
变量使用前必须使用 var 声明
标准特性优先
优先使用原生的方法，而不是自行封装的非标准接口。####
总是使用 === 比较符
使用 == 比较符可以让令人郁闷的bug消失于无形。使用严格的 === 比较符不会执行类型强制转换，从而能够严格地评估两个对象之间的差别。
禁止修改内置对象的原型
如 Object.prototype、Array.prototype、Function.prototype 等。
用 Array 和 Object 字面量代替 Array 和 Object 构造函数
/* Recommend */ var arr = [x1, x2, x3], obj = { a: 0, b: 1, c: 2 }; /* Not Recommend */ var arr = new Array(x1, x2), obj = new Object();拼接字符串
一般情况使用 + 操作符拼接字符串。如果存在大量的字符串拼接，推荐采用数组 join() 拼接字符串。
JavaScript 编码风格
命名方式
常量
使用全大写字母，并用下划线分隔单词，形如CONST_NAME_LIKE_THIS；
变量
变量采用小驼峰式命名，如 myVar。
类名
采用大驼峰式（帕斯卡命名法）命名，如 MyClass。
私有变量
私有属性、变量和方法以下划线 _ 开头，形如 _privateMethod。
变量前置声明
var name = 'My Name', future;
参考《Javascript语言精粹》
明确作用域
任何时候都要明确作用域，以提高可移植性和清晰度。例如，不要依赖作用域链中的 window 对象。
函数调用不要传输太多的参数
/* Not Recommend */ function greet(name, language, age, gender, hairColour, eyeColour) { alert(name); }代码格式
空行
使用空行来划分一组逻辑上相关联的代码片段。文件末尾空一行。
二元和三元操作符
操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。如果一行放不下, 还是按照上述的缩进风格来换行。
圆括号
圆括号在 JavaScript 中有两种作用，一种表示调用函数，一种表示不同的值的组合。只在必要的时候使用圆括号。
对于一元操作符（如delete、typeof、void），或是在某些关键词（如 return、throw、case、new）之后，不要使用括号。
字符串
字符串使用单引号，只有 JSON 中的字符串属性值使用双引号。
字符串中的 HTML 属性使用双引号。
/* Recommended */ var string = 'this is a string', object = { str: "this is a JSON string" };
作者：小强点中国
链接：https://www.jianshu.com/p/14d51599d147
共同学习，写下你的评论
评论加载中...
作者其他优质文章
