如何編寫規(guī)范,靈活,穩(wěn)定,高質(zhì)量的HTML和css代碼_html/css_WEB-ITnose

黃金定律

永遠(yuǎn)遵循同一套編碼規(guī)范,不管有多少人共同參與同一項(xiàng)目,一定要確保每一行代碼都像是同一個(gè)人編寫的.

語(yǔ)法:

1.用兩個(gè)空格來(lái)代替制表符(tab);2.嵌套元素應(yīng)當(dāng)縮進(jìn)一次(兩個(gè)空格);　　3.對(duì)于屬性的定義,確保全部使用雙引號(hào),絕不要使用單引號(hào);　　4.不要在自閉合元素的尾部添加斜線--HTML5規(guī)范(https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag)中明確說(shuō)明這是可選的;　5.不要省略可選的結(jié)束標(biāo)簽;6.為每個(gè)HTML頁(yè)面的第一行添加標(biāo)準(zhǔn)模式的聲明,這樣能確保在每個(gè)瀏覽器中有一只的展現(xiàn);

語(yǔ)言屬性:

根據(jù)HTML5規(guī)范,建議為HTML根元素指定 lang 屬性,從而為文本設(shè)置正確的語(yǔ)言.這將有助于語(yǔ)音合成工具確定其應(yīng)該采用的發(fā)音,有助于翻譯工具確定翻譯時(shí)應(yīng)遵守的規(guī)則等等.lang 屬性列表:http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

IE兼容模式:　　

IE支持通過(guò)特定的標(biāo)簽來(lái)確定回執(zhí)當(dāng)前頁(yè)面所應(yīng)該采用的IE版本.除非有強(qiáng)烈要求,否則最好是設(shè)置為edge mode,從而統(tǒng)治IE采用其所支持的最新的模式.

字符編碼:

通過(guò)聲明字符編碼,能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式.這樣做可以避免在HTML中使用字符實(shí)體標(biāo)記,從而全部與文檔編碼一致.

引入css和JavaScript文件:

根據(jù)HTML5規(guī)范,再引入css和JavaScript文件時(shí)一般不需要指定type屬性,因?yàn)閠ext/css和text/javascript分別是他們的默認(rèn)值.

實(shí)用為王:　

盡量遵循HTML標(biāo)準(zhǔn)和語(yǔ)義,但是不要以犧牲實(shí)用性為代價(jià).任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度.

屬性順序:

HTML屬性應(yīng)當(dāng)按照以下順序依次排列,確保代碼的易讀性:

1.class2.id,name　　　　3.data-*　　　　4.src,for,type,href　　　　5.title,alt　　　　6.Aria,role　　class用于標(biāo)示高度可復(fù)用的組件,因此應(yīng)該排在首位.

減少標(biāo)簽的數(shù)量

編寫HTML代碼時(shí),盡量避免多余的父元素.很多時(shí)候,這需要迭代和重構(gòu)來(lái)實(shí)現(xiàn).

JavaScript生成的標(biāo)簽

通過(guò)JavaScript生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯,并且境地性能.能避免是盡量避免.

CSS語(yǔ)法:

1.用兩個(gè)空格來(lái)代替制表符(tab);　　2.為選擇器分組時(shí),將單獨(dú)的選擇器單獨(dú)放在一行;　　3.為了代碼的易讀性,在每個(gè)聲明塊的左花括號(hào)錢添加一個(gè)空格;　　4.聲明塊的右花括號(hào)應(yīng)該單獨(dú)成行;　　5.每條聲明語(yǔ)句的 : 后面應(yīng)該插入一個(gè)空格;　　6.為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告,每條聲明都應(yīng)該獨(dú)占一行;　　7.所有聲明語(yǔ)句都應(yīng)該以分號(hào)結(jié)尾,最后一條聲明語(yǔ)句后面的分號(hào)是可選的,但是如果省略這個(gè)分號(hào),代碼可能更容易出;　　8.對(duì)于以逗號(hào)分隔的屬性值,每個(gè)逗號(hào)后面都應(yīng)該插入一個(gè)空格;　　9.對(duì)于屬性值或顏色參數(shù),省略小于1的小數(shù)前面的0(例如 .5代替0.5);　　10.十六進(jìn)制值應(yīng)該全部小寫,例如:#fff,盡量使用簡(jiǎn)寫形式的十六進(jìn)制值,例如用#fff代替#ffffff;　　11.為選擇其中的屬性添加雙引號(hào),例如 input[type="text"];　　12.避免為 0 值指定單位,例如用margin:0 代替margin:0px.

聲明順序:

　相關(guān)的屬性聲明應(yīng)該歸為一組,并且按照下面的順序排列:　　　

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)相關(guān)的樣式,因此排在首位.盒模型排在第二位,因?yàn)樗麤Q定了組建的尺寸和位置.其他屬性知識(shí)影響組建的內(nèi)部(inside)或者是不影響前兩組屬性,因此排在后面.參考http://twitter.github.io/recess/

不要使用@import　　

與標(biāo)簽相比,@import指令要慢很多,不光增加了額外的請(qǐng)求次數(shù),還會(huì)導(dǎo)致不可預(yù)料的問(wèn)題.替代辦法有一下幾種:

1.使用多個(gè)元素;　　　　　2.通過(guò)sass或less類似的css預(yù)處理器將多個(gè)css文件便以為一個(gè)文件;　　　　　3.通過(guò)rails、jekyll或者其他系統(tǒng)中提供過(guò)css文件合并功能.

媒體查詢(media query)的位置

將媒體查詢盡可能放在相關(guān)規(guī)則的附近.不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部.

帶前綴的屬性:　

當(dāng)使用特定廠商的帶前綴的屬性時(shí),通過(guò)鎖緊的方式,讓每個(gè)屬性的值在垂直方向?qū)R,這樣方便多行編輯.例如: 　　　　.selector { 　　　　

　　　　　　　　-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); 　　　　　　　　

　　　　　　　　　　　　box-shadow: 0 1px 2px rgba(0,0,0,.15); 　　　　

}

單行規(guī)則聲明:

　　對(duì)于值包含一條聲明的樣式,為了易讀性和便于快速編輯,建議將語(yǔ)句放在同一行.對(duì)于帶有多條聲明的樣式,還是應(yīng)當(dāng)將聲明分為多行.這樣做的關(guān)鍵因素是為了錯(cuò)誤檢測(cè).例如css校驗(yàn)器之處在180行有語(yǔ)法錯(cuò)誤,如果是單行單條聲明,你就不會(huì)忽略這個(gè)錯(cuò)誤,如果是單行多條聲明的話,你就要仔細(xì)分析避免漏掉錯(cuò)誤了.

Less和Sass中的嵌套

　避免非必要的嵌套.這是因?yàn)殡m然你可以使用嵌套,但是并不意味著應(yīng)該使用嵌套.只有在必須將樣式限制在父元素內(nèi)(也就是后代選擇器),并且存在多個(gè)需要嵌套的元素師才能使用嵌套.

注釋:

代碼是由人編寫并維護(hù)的.請(qǐng)確保你的代碼能夠自描述、注釋良好并且易于他人理解.好的代碼注釋能夠傳遞上下文關(guān)系和代碼目的;
不要簡(jiǎn)單地重申組件或者class名稱;對(duì)于較長(zhǎng)的注釋,務(wù)必書寫完整的句子,對(duì)于一般性的注釋,可以書寫簡(jiǎn)介的短語(yǔ).

class命名

class名稱中只能出現(xiàn)謝小字符和破折號(hào)(不是下劃線也不是駝峰命名法).破折號(hào)應(yīng)當(dāng)用于相關(guān)class的命名(類似命名空間,例如.btn和.btn-danger)避免過(guò)度任意的簡(jiǎn)寫. .btn代表button,但是.s不能表達(dá)任何意思;　　class名應(yīng)該盡可能短,并且意義明確;　　使用有意義的名稱,使用有組織的或者目的明確的名稱,不要使用表現(xiàn)形式的名稱;　　基于最近的class或者基本class作為新class的前綴;　　使用.js-* class來(lái)標(biāo)識(shí)行為(與樣式相對(duì)),并且不要將這些class包含到css文件中;　　在為sass和less變量命名時(shí)也可以參考上面列出的各項(xiàng)規(guī)范.

選擇器

對(duì)于通用元素使用class,這樣利于渲染性能的優(yōu)化;　　對(duì)于經(jīng)常出現(xiàn)的組件,避免使用屬性選擇器(例如:[class^="···"]),瀏覽器的性能會(huì)受到這些因素的影響;　　選擇器盡可能短,并且盡量限制組成選擇器的元素個(gè)數(shù),建議不要超過(guò)3個(gè);　　只有在必要的時(shí)候才將class限制在最近的父元素內(nèi).

代碼組織:

以組建為單位組織代碼段;　　指定一致的注釋規(guī)范;　　使用一致的空白符將代碼分隔成塊,這樣利于掃描較大的文檔;　　如果使用了多個(gè)css文件,將其按照組件而不是頁(yè)面的形式拆分,因?yàn)轫?yè)面會(huì)被重組,而組件只會(huì)被移動(dòng). 文章來(lái)源:http://www.css88.com/doc/codeguide/

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com