撰写灵便、平稳、高品质的HTML和css编码标准指南

金子基本定律
始终遵照同1套编号标准,无论有是多少人相互参加同1新项目,1定要保证每行编码都好像同1本人撰写的.

1、英语的语法:
1.用两个空格来替代制表符(tab);
2.嵌套循环元素理应缩进1次(两个空格);  
3.针对特性的界定,保证所有应用双引号,决不要应用单引号;  
4.不必在自闭合元素的尾部加上斜线--HTML5标准(https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag)中确立表明这是可选的; 
5.不必省略可选的完毕标识;
6.为每一个HTML网页页面的第1行加上规范方式的申明,这样能保证在每一个访问器中有1只的呈现;

2、語言特性:
依据HTML5标准,提议为HTML根元素特定 lang 特性,从而为文字设定正确的語言.这将有助于视频语音生成专用工具明确其应当选用的发音,有助于汉语翻译专用工具明确汉语翻译时应遵循的标准这些.lang 特性目录:http://www.sitepoint.com/web-foundations/iso⑵-letter-language-codes/

3、IE适配方式:  
IE适用根据特殊的标识来明确回执当今网页页面所应当选用的IE版本号.除非有明显规定,不然最好是是设定为edge mode,从而统治IE选用其所适用的全新的方式.

4、标识符编号:
根据申明标识符编号,可以保证访问器迅速并非常容易的分辨网页页面內容的3D渲染方法.这样做能够防止在HTML中应用标识符实体线标识,从而所有与文本文档编号1致.

5、引进css和JavaScript文档:
依据HTML5标准,再引进css和JavaScript文档时1般不必须特定type特性,由于text/css和text/javascript各自是她们的默认设置值.

6、好用为王: 
尽可能遵照HTML规范和词义,可是不必以放弃好用性为成本.任什么时候候都要尽可能应用至少的标识并维持最少的繁杂度.

7、特性次序:
HTML特性理应依照下列次序先后排序,保证编码的易读性:
1.class
2.id,name    
3.data-*    
4.src,for,type,href    
5.title,alt    
6.Aria,role  
class用于标识高宽比可复用的组件,因而应当排在首位.

8、降低标识的数量
撰写HTML编码时,尽可能防止过剩的父元素.许多情况下,这必须迭代更新和重构来完成.

9、JavaScript转化成的标识
根据JavaScript转化成的标识让內容变得不容易搜索、编写,而且处境特性.能防止是尽可能防止.

10、CSS英语的语法:
1.用两个空格来替代制表符(tab);  
2.为挑选器排序时,将独立的挑选器独立放在1行;  
3.以便编码的易读性,在每一个申明块的左花括号钱加上1个空格;  
4.申明块的右花括号应当独立成行;  
5.每条申明句子的 : 后边应当插进1个空格;  
6.以便得到更精确的不正确汇报,每条申明都应当占有1行;  
7.全部申明句子都应当以分号末尾,最终1条申明句子后边的分号是可选的,可是假如省略这个分号,编码将会更非常容易出;  
8.针对以逗号隔开的特性值,每一个逗号后边都应当插进1个空格;  
9.针对特性值或色调主要参数,省略小于1的小数前面的0(比如 .5替代0.5);  
10.106进制值应当所有小写,比如:#fff,尽可能应用简写方式的106进制值,比如用#fff替代#ffffff;  
11.为挑选在其中的特性加上双引号,比如 input[type="text"];  
12.防止为 0 值特定企业,比如用margin:0 替代margin:0px.

101、申明次序:

有关的特性申明应当归为1组,而且依照下面的次序排序:   

1.positioning(position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100;);   
2.box model(display: block; float: left; width: 100px; height: 100px;);   
3.typographic(font: normal 13px "Microsoft YaHei"; line-height: 1.5em; color: #333; text-align:center;);   
4.visual(background: yellow; border: 1px solid #c00; border-radius: 3px; opacity: 1; );
   
因为精准定位(positioning)能够从一切正常的文本文档流中移除元素,而且还能遮盖盒实体模型(box model)有关的款式,因而排在首位.盒实体模型排在第2位,由于他决策了组建的规格和部位.别的特性专业知识危害组建的內部(inside)或是不危害前两组特性,因而排在后边.

102、不必应用@import  
与标识相比,@import命令要慢许多,不仅提升了附加的恳求次数,还会致使不能意料的难题.取代方法有1下几种:
1.应用好几个元素;     
2.根据sass或less相近的css预解决器将好几个css文档便认为1个文档;     
3.根据rails、jekyll或别的系统软件中出示过css文档合拼作用.

103、新闻媒体查寻(media query)的部位
将新闻媒体查寻尽量放在有关标准的周边.不必将她们装包放在1个单1款式文档中或放在文本文档底部.

104、带前缀的特性: 
当应用特殊厂商的带前缀的特性时,根据锁紧的方法,让每一个特性的值在竖直方位对齐,这样便捷多行编写.比如:    

CSS Code拷贝內容到剪贴板
  1. .selector {        
  2.   
  3.         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);            
  4.   
  5.             box-shadow: 0 1px 2px rgba(0,0,0,.15);        
  6.   
  7. }   
  8.   

105、单行标准申明:
  针对值包括1条申明的款式,以便易读性和便于迅速编写,提议将句子放在同1行.针对带有好几条申明的款式,還是理应将申明分成多行.这样做的重要要素是以便不正确检验.比如css校检器的地方在180行有英语的语法不正确,假如是单行一条申明,你就不容易忽视这个不正确,假如是单行好几条申明的话,你就要细心剖析防止漏掉不正确了.

106、Less和Sass中的嵌套循环
 防止非必要的嵌套循环.这是由于尽管你可使用嵌套循环,可是其实不代表着应当应用嵌套循环.仅有在务必将款式限定在父元素内(也便是子孙后代挑选器),而且存在好几个必须嵌套循环的元素师才可以应用嵌套循环.

107、注解:
编码是由人撰写并维护保养的.请保证你的编码可以自叙述、注解优良而且易于别人了解.好的编码注解可以传送左右文关联和编码目地;
不必简易地重申组件或class名字;
针对较长的注解,尽量撰写详细的语句,针对1般性的注解,能够撰写简介的短语.

108、class取名
class名字中只能出現谢小标识符和破折号(并不是下划线也并不是驼峰取名法).破折号理应用于有关class的取名(相近取名室内空间,比如.btn和.btn-danger)
防止过多随意的简写. .btn意味着button,可是.s不可以表述任何意思;  
class名应当尽量短,而且实际意义确立;  
应用成心义的名字,应用有机构的或目地确立的名字,不必应用主要表现方式的名字;  
根据近期的class或基础class做为新class的前缀;  
应用.js-* class来标志个人行为(与款式相对性),而且不必将这些class包括到css文档中;  
在为sass和less自变量取名时还可以参照上面列出的各项标准.

109、挑选器
针对通用性元素应用class,这样利于3D渲染特性的提升;  
针对常常出現的组件,防止应用特性挑选器(比如:[class^="···"]),访问器的特性会遭受这些要素的危害;  
挑选器尽量短,而且尽可能限定构成挑选器的元素个数,提议不必超出3个;  
仅有在必要的情况下才将class限定在近期的父元素内.

210、编码机构:
以组建为企业机构编码段;  
特定1致的注解标准;  
应用1致的空白符将编码隔开成块,这样利于扫描仪较大的文本文档;  
假如应用了好几个css文档,将其依照组件而并不是网页页面的方式拆分,由于网页页面会被资产重组,而组件只会被挪动.

以上便是本文的所有內容,期待对大伙儿撰写标准、灵便、平稳、高品质的HTML和css编码有一定的协助。

原文:http://www.cnblogs.com/codinganytime/p/5258223.html