《前端书写规范手册.docx》由会员分享，可在线阅读，更多相关《前端书写规范手册.docx（11页珍藏版）》请在课桌文档上搜索。
1、前端书写规范手册前端规范2015-9-18前端规范11.HTML1D语法12)HTML5doctype23)语言属性.34)IE兼容模式45)字符编码CSS 与javascript 文件67)属性依次78)布尔型属性89)正确运用盒子模型92.CSS131)语法132)声明依次143)媒体查询的位置154)单行规明165）简写规则176）注释187）class命名198）选择器.2011.HTML1）语法用两个空格来代替制表符（tab）-这是唯一能保证在全部环境下获得一样呈现的方法。嵌套元素应当缩进一次（即两个空格）。对于属性的定义，确保全部运用双引号，绝不要运用单引号。不要在自闭合（Self
2、-CloSing）元素的尾部添加斜线一HTML5规范中明确说明这是可选的。不要省略可选的结束标签(CIoSingtag)(例如,/Ii或/body)。!DOCTYPEhtmlhtmlheadtitlePagetitle/title/headbodyimgsrc=images/company-logo,pngalt=Companyhlclass=hello-worIdHello,world!/hl/body/html22)HTML5doctype为每个HTML页面的第一行添加标准模式(standardmode)的声明，这样能够确保在每个阅读器中拥有一样的呈现。!DOCTYPEhtmlhtmlhe
3、ad/head/html33)语言属性依据HTML5规范：为html根元素指定Iang属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应当接受的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。htmllang=zh-CN!一一/html44)IE兼容模式IE支持通过特定的meta标签来确定绘制当前页面所应当接受的IE版本。除非有猛烈的特殊需求，否则最好是设置为edgemode,从而通知IE接受其所支持的最新的模式。metahtmlIang=Zh-CNheadmeta CharSet=Utf-8meta132.CSS1)语法用两个空格来代替制表符(tab)-这是唯一能保证在全部
4、环境下获得一样呈现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的：后应当插入一个空格。为了获得更精确的错误报告，每条声明都应当独占一行。全部声明语句都应当以分号结尾。最终一条声明语句后面的分号是可选的，但是，假如省略这个分号，你的代码可能更易出错。对于以逗号分隔的属性值，每个逗号后面都应当插入一个空格(例如，box-shadow)o不要在rgb()rgba()hsl()hsla()或rect()值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号，
5、不加空格)。对于属性值或颜色参数，省略小于1的小数前面的0(例如，.5代替0.5；5px代替-0.5px)o十六进制值应当全部小写，例如，Sfffo在扫描文档时，小写字符易于辨别，因为他们的形式更易于区分。尽量运用简写形式的十六进制值，例如，用#fff代替Sffffffo为选择器中的属性添加双引号，例如，inputtype=text。只有在某些状况下是可选的，但是，为了代码的一样性，建议都加上双引号。避开为0值指定单位，例如，用margin:0;代替margin:Opx;O*BadCSS*/selector,.selector-secondary,selectorLtype=textpaddi
6、ng:15px;margin:OpxOpx15px;background-color:rgba(0,0,0,0.5);box-shadow:OpxIpx2pxUCCCfinset0Ipx0#FFFFFF*GoodCSS*/selector,.selector-secondary,selectorLtype=textpadding:15px;margin-bottom:15px;background-color:rgba(0,0,0,.5);box-shadow:0Ipx2px#ccc,inset0Ipx0#fff;142)声明依次相关的属性声明应当归为一组，并依据下面的依次排列：Positio
7、ningBoxmodelTypographicVisual由于定位(POSitioning)可以从正常的文档流中移除元素，并且还能覆盖盒模型(boxmodel)相关的样式，因此排在首位。盒模型排在其次位，因为它确定了组件的尺寸和位置。其他属性只是影响组件的内部(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;h
8、eight:100px;*Typography*/font:normal13pxHelveticaNeue,sans-serif;line-height:1.5;color:#333;text-align:center;*Visual*/background-color:ttf5f5f5;border:Ipxsolidtte5e5e5;border-radius:3px;*Misc*/opacity:1;153）媒体查询的位置将媒体查询放在尽可能相关规则的旁边。不要将他们打包放在一个单一样式文件中或者放在文档底部。164）单行规则声明对于只包含一条声明的样式，为了易读性和便于快速编辑，将语句放
9、在同一行。对于带有多条声明的样式，还是应当将声明分为多行。这样做的关键因素是为了错误检测一例如，CSS校验器指出在183行有语法错误。假如是单行单条声明，你就不会忽视这个错误；假如是单行多条声明的话，你就要细致分析避开漏掉错误了。*Singledeclarationsononeline*/.spanlwidth:60px;.span2width:140px;.span3width:220px;*Multipledeclarations,oneperline*/.spritedisplay:inline-block;width:url(.imgsprite.png);175)简写规则简写形式的属
10、性声明在须要显示地设置全部值的状况下，应当尽量限制运用简写形式的属性声明。16px;height:15px;background-image:常见的滥用简写属性声明的状况如下：paddingmarginfontbackgroundborderborder-radius大部分状况下，我们不须要为简写形式的属性声明指定全部值。例如，HTML的heading元素只须要设置上、下边距(margin)的值，因此，在必要的时候，只需覆盖这两个值就可以。过度运用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。*Badexample*/.elementmargin:00I
11、Opx;background:red;background:url(image,jpg);border-radius:3px3px00;*Goodexample*/.elementmargin-bottom:IOpx;background-color:red;background-image:url(image,jpg);border-top-left-radius:3px;border-top-right-radius:3px;186)注释代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简洁地重申组件或class名称。
12、对于较长的注释，务必书写完整的句子；对于一般性注解,可以书写简洁的短语。CSS代码应当按功能模块书写在一起，并在代码上面写上该模块的简洁介绍。197）class命名class名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关class的命名（类似于命名空间）（例如，.btn和.btn-danger）。避开过度随意的简写。.btn代表button,但是.s不能表达任何意思。class名称应当尽可能短，并且意义明确。运用有意义的名称。运用有组织的或目的明确的名称，不要运用表现形式（presentational）的名称。基于最近的父class或基本（ba
13、se）class作为新class的前缀。208）选择器对于通用元素运用class,这样利于渲染性能的优化。对于经常出现的组件，避开运用属性选择器（例如，class-.）o阅读器的性能会受到这些因素的影响。选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过3o试着简化和优化CSS选择器。以下是CSS选择器的性能排行（从最快的起先）：ID选择器：#idclass选择器：.class标签：div相邻的兄弟元素：a+i父元素选择器：ulIi通配符选择器：*伪类和伪元素：a:hover,你应当记住阅读器处理选择器是从右向左的，这也就是为什么最右面的选择器会更快*Badexample*/span.page-containerSstream.stream-item.tweet.tweet-header.username.avatar.*Goodexample*/.avatar.tweet-header.username.tweet.avatar.div*./bad.listIi./bad.list-item./good#list.list-item./good
