首頁 > 文章 > web前端 > 怎樣編寫靈活、穩定、高品質的HTML和css程式碼

怎樣編寫靈活、穩定、高品質的HTML和css程式碼

php中世界最好的语言原創: 2018-01-24 09:19:591911瀏覽

這次帶給大家怎樣寫靈活、穩定、高品質的HTML和css程式碼，寫出靈活、穩定、高品質的HTML和css程式碼的注意事項有哪些，以下就是實戰案例，一起來看一下。

黃金定律
永遠遵循同一套編碼規範,不管有多少人共同參與同一專案,一定要確保每一行程式碼都像是同一個人編寫的.

#一、語法:
1.用兩個空格來代替製表符(tab);
2.嵌套元素應縮排一次(兩個空格);　　
3.對於屬性的定義,確保全部使用雙引號,絕不使用單引號;　　
4.不要在自閉合元素的尾部添加斜線--HTML5規範(https://dev.w3.org/html5/spec-author-view/ syntax.html#syntax-start-tag)中明確說明這是可選的;　
5.不要省略可選的結束標籤;
6.為每個HTML頁面的第一行添加標準模式的聲明,這樣能確保在每個瀏覽器中有一隻的展現;

二、語言屬性:
根據HTML5規範,建議為HTML根元素指定lang 屬性,從而為文本設置正確的語言.這將有助於語音合成工具確定其應該採用的發音,有助於翻譯工具確定翻譯時應遵守的規則等等.lang 屬性列表:http://www.sitepoint.com/web-foundations/iso -2-letter-language-codes/

三、IE相容模式:　　
IE支援透過特定的標籤來決定回執目前頁面所應該採用的IE版本.除非有強烈要求,否則最好是設定為edge mode,從而統治IE採用其所支援的最新的模式.

四、字元編碼:
透過聲明字元編碼,能夠確保瀏覽器快速並容易的判斷頁面內容的渲染方式.這樣做可以避免在HTML中使用字元實體標記,從而全部與文檔編碼一致.

五、引入css和JavaScript文件:
根據HTML5規範,再引入css和JavaScript文件時一般不需要指定type屬性,因為text/css和text/javascript分別是他們的預設值.

六、實用為王:　
#盡量遵循HTML標準和語意,但是不要以犧牲實用性為代價.任何時候都要盡量使用最少的標籤並保持最小的複雜度.

七、屬性順序:
HTML屬性應按照以下順序依次排列,確保代碼的易讀性:
1.class
2.id,name　　　　
3.data-*　　　　
4.src,for,type,href　　　　
5.ti #class用來標示高度可重複使用的元件,因此應該排在首位.

八、減少標籤的數量

編寫HTML程式碼時,盡量避免多餘的父元素.很多時候,這需要迭代與重構來實現.

九、JavaScript產生的標籤

透過JavaScript產生的標籤讓內容變得不易找到、編輯,並且境地性能.能避免是盡量避免.

十、CSS語法:

1.用兩個空格來代替製表符(tab);　　

2.為
選擇器分組
時,將單獨的選擇器單獨放在一行;　　3.為了程式碼的易讀性,在每個宣告區塊的左花括號錢加上一個空格;　　4.宣告區塊的右花括號應該單獨成行;　　
#5.每個筆
#5.宣告語句的: 後面應該插入一個空格;　　
6.為了獲得更準確的錯誤報告,每條聲明都應該獨佔一行;　　
7.所有聲明語句都應該以分號結尾,最後一條聲明語句後面的分號是可選的,但是如果省略這個分號,代碼可能更容易出;　　
8.對於以逗號分隔的屬性值,每個逗號後面都應該插入一個空格;　　
9.對於屬性值或顏色參數,省略小於1的小數前面的0(例如.5代替0.5);　　
10.十六進位值應該全部小寫,例如:#fff,盡量使用簡寫形式的十六進制值,例如用#fff代替#ffffff;　　
11.為選擇其中的屬性添加雙引號,例如input[type="text"];　　
12.避免為0 值指定單位,例如用margin :0 代替margin:0px.

十一、宣告順序:

相關的屬性宣告應該歸為一組,並且依照下面的順序排列:　　　

#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;);　　國王。#ground4. : yellow; border: 1px solid #c00; border-radius: 3px; opacity: 1; );
　　　
由於定位(positioning)可以從正常的文檔流中移除元素,並且還能覆蓋盒模型(box model)相關的樣式,因此排在首位.盒模型排在第二位,因為他決定了組建的尺寸和位置.其他屬性知識影響組建的內部(inside)或者是不影響前兩組屬性,因此排在後面.

十二、不要使用@import　　
與標籤相比,@import指令要慢很多,不光增加了額外的請求次數,還會導致不可預料的問題.替代辦法有一下幾種:
1.使用多個元素;　　　　　
2.透過sass或less類似的css預處理器將多個css檔案便以為一個檔案;　　　　　
#3.透過rails、jekyll或其他系統中提供過css檔案合併功能.

十三、媒體查詢(media query)的位置
將媒體查詢盡可能放在相關規則的附近.不要將他們打包放在一個單一樣式文件中或放在文檔底部.

十四、帶前綴的屬性:　
當使用特定廠商的帶前綴的屬性時,通過鎖緊的方式,讓每個屬性的值在垂直方向對齊,這樣方便多行編輯

十五、單行規則宣告:
　　對於值包含一條宣告的樣式,為了易讀性和便於快速編輯,建議將語句放在同一行.對於帶有多個宣告的樣式,還是應將聲明分為多行.這樣做的關鍵因素是為了錯誤檢測.例如css校驗器之處在180行有語法錯誤,如果是單行單條聲明,你就不會忽略這個錯誤,如果是單行多條宣告的話,你就要仔細分析避免漏掉錯誤了.

#十六、Less和Sass中的嵌套
　避免非必要的嵌套.這是因為雖然你可以使用嵌套,但是並不意味著應該使用嵌套.只有在必須將樣式限制在父元素內(也就是後代選擇器),並且存在多個需要嵌套的元素師才能使用嵌套.

十七、註釋:
程式碼是由人編寫並維護的.請確保你的程式碼能夠自描述、註解良好並且易於他人理解.好的程式碼註解能夠傳遞上下文關係和程式碼目的;
不要簡單地重申元件或class名稱;
對於較長的註解,務必書寫完整的句子,對於一般性的註解,可以書寫簡介的片語.

十八、class命名
class名稱中只能出現謝小字元和破折號(不是底線也不是駝峰命名法).破折號應用於相關class的命名(類似命名空間,例如.btn和.btn-danger)
避免過度任意的簡寫. .btn代表button,但是.s不能表達任何意思;　　
class名應該盡可能短,並且意義明確;　　
使用有意義的名稱,使用有組織的或目的明確的名稱,不要使用表現形式的名稱;　　
基於最近的class或者基本class作為新class的前綴;　　
使用.js-* class來標識行為(與樣式相對),並且不要將這些class包含到css文件中;　　
在為sass和less變數命名時也可以參考上面列出的各項規範.

十九、選擇器
對於一般元素使用class,這樣利於渲染效能的最佳化;　　
對於經常出現的元件,避免使用屬性選擇器(例如:[class^="···" ]),瀏覽器的性能會受到這些因素的影響;　　
選擇器盡可能短,並且盡量限制組成選擇器的元素個數,建議不要超過3個;　　
只有在必要的時候才將class限制在最近的父元素內.

二十、程式碼組織:
以組成為單位組織程式碼段;　　
指定一致的註解規範;　　
使用一致的空白符將程式碼分隔成區塊,這樣利於掃描較大的文件;　　
如果使用了多個css檔案,將其按照元件而不是頁面的形式拆分,因為頁面會被重組,而元件只會被移動

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！