首頁 > 開發者 > 網站開發

編寫靈活、穩定、高品質的 HTML 和 CSS 代碼的規範

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   http   java   使用   os   strong   io   

今天看了Bootstrap中文網關於編碼規範的文章，覺得很受用，趕緊記下來。

首先是黃金定律：永遠遵循同一套編碼規範。
不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。


HTML部分

文法

  • 用兩個空格來代替定位字元（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
  • 嵌套元素應當縮排一次（即兩個空格）
  • 對於屬性的定義，確保全部使用雙引號，絕不要使用單引號
  • 不要在自閉（例如，<meta> 或 <img>）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的
  • 不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。


HTML5 doctype
為每個 HTML 頁面的第一行添加標準模（standard mode）式的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。

語言屬性 <html lang="en-us">
強烈建議為 html 根項目指定 lang 屬性，從而為文檔設定正確的語言。這將 有助於語音合成工具確定其所應該採用的發音，有助於翻譯工具確定其翻譯時所應遵守的規則 等等。

IE相容模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
IE 支援通過特定的 <meta> 標籤來確定繪製當前頁面所應該採用的 IE 版本。除非有強烈的特殊需求，否則最好是設定為 edge mode，從而通知 IE 採用其所支援的最新的模式。

字元編碼 <meta charset="utf-8">通過明確聲明字元編碼，能夠確保瀏覽器快速並容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字元實體標記（character entity），從而全部與文檔編碼一致（一般採用 UTF-8 編碼）。
引入 CSS 和 Javascript 檔案根據 HTML5 規範，在引入 CSS 和 JavaScript 檔案時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的預設值。

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

屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。 

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class 用於標識高度可複用組件，因此應該排在首位。id 用於標識具體組件，應當謹慎使用（例如，頁面內的書籤），因此排在第二位。

布爾（boolean）型屬性 <input type="text" disabled>
布爾型屬性可以在聲明時不賦值。XHTML 規範要求為其賦值，但是 HTML5 規範不需要。

減少標籤的數量
編寫 HTML 程式碼時，盡量避免多餘的父元素。

JavaScript 產生的標籤
通過 JavaScript 產生的標籤讓內容變得不易尋找、編輯，並且降低效能。能避免時盡量避免。


CSS部分

文法 

  • 用兩個空格來代替定位字元（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
  • 為選取器分組時，將單獨的選取器單獨放在一行。
  • 為了代碼的易讀性，在每個聲明塊的左花括弧前添加一個空格。
  • 聲明塊的右花括弧應當單獨成行。
  • 每條聲明語句的 : 後應該插入一個空格。
  • 為了獲得更準確的錯誤報表，每條聲明都應該獨佔一行。
  • 所有聲明語句都應當以分號結尾。最後一條聲明語句後面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
  • 對於以逗號分隔的屬性值，每個逗號後面都應該插入一個空格（例如，box-shadow）。
  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格。這樣利於從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。  
  • 對於屬性值或顏色參數，省略小於 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。   
  • 十六進位值應該全部小寫，例如，#fff。在掃描文檔時，小寫字元易於分辨，因為他們的形式更易於區分。  
  • 盡量使用簡寫形式的十六進位值，例如，用 #fff 代替 #ffffff。   
  • 為選取器中的屬性添加雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。   
  • 避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。


聲明順序
相關的屬性聲明應當歸為一組，並按照下面的順序排列：   

  • Positioning 定位
  • Box model  盒模型
  • Typographic 印刷
  • Visual 視覺

由於定位（positioning）可以從正常的文檔流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。  
其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在後面。

不要使用 @import
與 <link> 標籤相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：  

  • 使用多個 <link> 元素
  • 通過 Sass 或 Less 類似的 CSS 前置處理器將多個 CSS 檔案編譯為一個檔案  
  • 通過 Rails、Jekyll 或其他系統中提供過 CSS 檔案合并功能


媒體查詢（Media query）的位置
將媒體查詢放在儘可能相關規則的附近。不要將他們打包放在一個單一樣式檔案中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。

帶首碼的屬性
當使用特定廠商的帶有首碼的屬性時，通過縮排的方式，讓每個屬性的值在垂直方向對其，這樣便於多行編輯。

單行規則聲明
對於只包含一條聲明的樣式，為了易讀性和便於快速編輯，建議將語句放在同一行。對於帶有多條聲明的樣式，還是應當將聲明分為多行。
這樣做的關鍵因素是為了錯誤偵測 -- 例如，CSS 校正器指出在 183 行有語法錯誤。如果是單行聲明，你就不會忽略這個錯誤；如果是多行聲明的話，你就要仔細分析了。

簡寫形式的屬性聲明
在需要顯示地設定所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：  

  • padding   
  • margin   
  • font   
  • background  
  • border   
  • border-radius

大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。例如，HTML 的 heading 元素只需要設定上、下邊距（margin）的值，因此，在必要的時候，只需覆蓋這兩個值就可以。過度使用簡寫形式的屬性聲明會導致代碼混亂，並且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。

Less 和 Sass 中的嵌套
避免非必要的嵌套。這是因為雖然你可以使用嵌套，但是並不意味著應該使用嵌套。只有在必須將樣式限制在父元素內（也就是後代選取器），並且存在多個需要嵌套的元素時才使用嵌套。

注釋
代碼是由人編寫並維護的。請確保你的代碼能夠自描述、注釋良好並且易於他人理解。好的代碼注釋能夠傳達上下文關係和代碼目的。不要簡單地重申組件或 class 名稱。
對於較長的注釋，務必書寫完整的句子；對於一般性註解，可以書寫簡潔的短語。

class 命名 

  • class 名稱中只能出現小寫字元和破折號（dashe）（不是底線，也不是駝峰命名法）。破折號應當用於相關 class 的命名（類似於命名空間）（例如，.btn 和 .btn-danger）。
  • 避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。
  • class 名稱應當儘可能短，並且意義明確。
  • 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。
  • 基於最近的父 class 或基本（base） class 作為新 class 的首碼。  
  • 使用 .js-* class 來標識行為（與樣式相對），並且不要將這些 class 包含到 CSS 檔案中。

在為 Sass 和 Less 變數命名是也可以參考上面列出的各項規範。

選取器

  • 對於通用元素使用 class ，這樣利於渲染效能的最佳化。
  • 對於經常出現的組件，避免使用屬性選取器（例如，[class^="..."]）。瀏覽器的效能會受到這些因素的影響。
  • 選取器要儘可能短，並且盡量限制組成選取器的元素個數，建議不要超過 3 。  
  • 只有在必要的時候才將 class 限制在最近的父元素內（也就是後代選取器）（例如，不使用帶首碼的 class 時 -- 首碼類似於命名空間）


程式碼群組織      

  • 以組件為單位組織程式碼片段。
  • 制定一致的注釋規範。
  • 使用一致的空白符將代碼分隔成塊，這樣利於掃描較大的文檔。
  • 如果使用了多個 CSS 檔案，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動


編輯器配置
將你的編輯器按照下面的配置進行設定，以避免常見的代碼不一致和差異：

    • 用兩個空格代替定位字元（soft-tab 即用空格代表 tab 符）。
    • 儲存檔案時，刪除尾部的空白符。
    • 設定檔案編碼為 UTF-8。  
    • 在檔案結尾添加一個空白行

 

筆記連結：http://www.w3cfuns.com/blog-3629-5398230.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More