• 120.74 KB
  • 21页

前端书写规范手册

  • 21页
  • 当前文档由用户上传发布,收益归属用户
  1. 1、本文档共5页,可阅读全部内容。
  2. 2、本文档内容版权归属内容提供方,所产生的收益全部归内容提供方所有。如果您对本文有版权争议,可选择认领,认领后既往收益都归您。
  3. 3、本文档由用户上传,本站不保证质量和数量令人满意,可能有诸多瑕疵,付费之前,请仔细先通过免费阅读内容等途径辨别内容交易风险。如存在严重挂羊头卖狗肉之情形,可联系本站下载客服投诉处理。
  4. 文档侵权举报电话:19940600175。
'前端规范2015-9-18前端规范11.HTML11)语法12)HTML5doctype23)语言属性34)IE兼容模式45)字符编码56)引入CSS与javascript文件67)属性顺序78)布尔型属性89)正确使用盒子模型92.CSS101)语法102)声明顺序113)媒体查询的位置124)单行规则声明135)简写规则146)注释157)class命名168)选择器17 1.HTML1)语法l用两个空格来代替制表符(tab)--这是唯一能保证在所有环境下获得一致展现的方法。l嵌套元素应当缩进一次(即两个空格)。l对于属性的定义,确保全部使用双引号,绝不要使用单引号。l不要在自闭合(self-closing)元素的尾部添加斜线--HTML5规范中明确说明这是可选的。l不要省略可选的结束标签(closingtag)(例如,或)。PagetitleHello,world!2)0 2)HTML5doctype为每个HTML页面的第一行添加标准模式(standardmode)的声明,这样能够确保在每个浏览器中拥有一致的展现。19 2)语言属性根据HTML5规范:为html根元素指定lang属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。19 4)IE兼容模式IE支持通过特定的标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求,否则最好是设置为edgemode,从而通知IE采用其所支持的最新的模式。19 4)字符编码通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在HTML中使用字符实体标记(characterentity),从而全部与文档编码一致(一般采用UTF-8编码)。19 4)引入CSS与javascript文件l根据HTML5规范,在引入CSS和JavaScript文件时一般不需要指定type属性,因为text/css和text/javascript分别是它们的默认值。l一般情况下CSS文件放在标签中;javascript放在底部。19 7)属性顺序HTML属性应当按照以下给出的顺序依次排列,确保代码的易读性。lclasslid,nameldata-*lsrc,for,type,hrefltitle,altlaria-*,roleclass用于标识高度可复用组件,因此应该排在首位。id用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。注:除非特殊情况,或UI插件需要,严禁在HTML标签中添加额外属性:包括style、JS事件、标签自带属性(width,height,border,...)等。造成HTML代码污染。Examplelink19 8)布尔型属性布尔(boolean)型属性布尔型属性可以在声明时不赋值。XHTML规范要求为其赋值,但是HTML5规范不需要。19 8)正确使用盒子模型编写HTML代码时尽量减少不必要的父元素。并且根据功能组件划分为一个个盒子模型。有利于代码的维护。19 8)注释l代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。l对于较长的注释,务必书写完整的句子;对于一般性注解,可以书写简洁的短语。l利用盒子模型将各个功能模块分开,在最上面注释该HTML模块的说明。并且对每个盒子模型的使用与该模块相关的ID命名。l在每个注释前添加一行空行,方便维护。/*header*/....
/*content*//*side*/....
/*section*/....
/*footer*/.....
19 11)wap端meta标签除非特别需求不然我们将不去改变以下三个meta标签属性:l页面缩放l拨号l发送邮件19 12)HTML基本模板19Title

Hello,World!

19 2.CSS1)语法l用两个空格来代替制表符(tab)--这是唯一能保证在所有环境下获得一致展现的方法。l为选择器分组时,将单独的选择器单独放在一行。l为了代码的易读性,在每个声明块的左花括号前添加一个空格。l声明块的右花括号应当单独成行。l每条声明语句的:后应该插入一个空格。l为了获得更准确的错误报告,每条声明都应该独占一行。l所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。l对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。l不要在rgb()、rgba()、hsl()、hsla()或rect()值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。l对于属性值或颜色参数,省略小于1的小数前面的0(例如,.5代替0.5;-.5px代替-0.5px)。l十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。l尽量使用简写形式的十六进制值,例如,用#fff代替#ffffff。l为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。l避免为0值指定单位,例如,用margin:0;代替margin:0px;。/*BadCSS*/.selector,.selector-secondary,.selector[type=text]{padding:15px;margin:0px0px15px;background-color:rgba(0,0,0,0.5);box-shadow:0px1px2px#CCC,inset01px0#FFFFFF}/*GoodCSS*/.selector,.selector-secondary,.selector[type="text"]{padding:15px;margin-bottom:15px;background-color:rgba(0,0,0,.5);box-shadow:01px2px#ccc,inset01px0#fff;}19 2)声明顺序相关的属性声明应当归为一组,并按照下面的顺序排列:lPositioninglBoxmodellTypographiclVisual由于定位(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;height:100px;/*Typography*/font:normal13px"HelveticaNeue",sans-serif;line-height:1.5;color:#333;text-align:center;/*Visual*/background-color:#f5f5f5;border:1pxsolid#e5e5e5;border-radius:3px;/*Misc*/opacity:1;}19 3)媒体查询的位置将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。19 3)单行规则声明l对于只包含一条声明的样式,为了易读性和便于快速编辑,将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行。l这样做的关键因素是为了错误检测--例如,CSS校验器指出在183行有语法错误。如果是单行单条声明,你就不会忽略这个错误;如果是单行多条声明的话,你就要仔细分析避免漏掉错误了。/*Singledeclarationsononeline*/.span1{width:60px;}.span2{width:140px;}.span3{width:220px;}/*Multipledeclarations,oneperline*/.sprite{display:inline-block;width:16px;height:15px;background-image:url(../img/sprite.png);}19 3)简写规则简写形式的属性声明在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下:lpaddinglmarginlfontlbackgroundlborderlborder-radius大部分情况下,我们不需要为简写形式的属性声明指定所有值。例如,HTML的heading元素只需要设置上、下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。/*Badexample*/.element{margin:0010px;background:red;background:url("image.jpg");border-radius:3px3px00;}/*Goodexample*/.element{margin-bottom:10px;background-color:red;background-image:url("image.jpg");border-top-left-radius:3px;border-top-right-radius:3px;}19 6)注释l代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或class名称。l对于较长的注释,务必书写完整的句子;对于一般性注解,可以书写简洁的短语。lCSS代码应该按功能模块书写在一起,并在代码上面写上该模块的简单介绍。19 7)class命名lclass名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关class的命名(类似于命名空间)(例如,.btn和.btn-danger)。l避免过度任意的简写。.btn代表button,但是.s不能表达任何意思。lclass名称应当尽可能短,并且意义明确。l使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。l基于最近的父class或基本(base)class作为新class的前缀。19 8)选择器l对于通用元素使用class,这样利于渲染性能的优化。l对于经常出现的组件,避免使用属性选择器(例如,[class^="..."])。浏览器的性能会受到这些因素的影响。l选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过3。l试着简化和优化CSS选择器。以下是CSS选择器的性能排行(从最快的开始):ØID选择器:#idØclass选择器:.classØ标签:divØ相邻的兄弟元素:a+iØ父元素选择器:ul>liØ通配符选择器:*Ø伪类和伪元素:a:hover,你应该记住浏览器处理选择器是从右向左的,这也就是为什么最右面的选择器会更快/*Badexample*/span{...}.page-container#stream.stream-item.tweet.tweet-header.username{...}.avatar{...}/*Goodexample*/.avatar{...}.tweet-header.username{...}.tweet.avatar{...}div*{...}//bad.listli{...}//bad.list-item{...}//good#list.list-item{...}//good19'

您可能关注的文档

相关文档

最近下载