整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML(5) 代碼規范

          TML 代碼約定

          很多 Web 開發人員對 HTML 的代碼規范知之甚少。

          在2000年至2010年,許多Web開發人員從 HTML 轉換到 XHTML。

          使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

          而針對于 HTML5 ,我們應該形成比較好的代碼規范,以下提供了幾種規范的建議。

          使用正確的文檔類型

          文檔類型聲明位于HTML文檔的第一行:

          <!DOCTYPE html>

          如果你想跟其他標簽一樣使用小寫,可以使用以下代碼:

          <!doctype html>

          使用小寫元素名

          HTML5 元素名可以使用大寫和小寫字母。

          推薦使用小寫字母:

          • 混合了大小寫的風格是非常糟糕的。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <SECTION>

          <p>這是一個段落。</p>

          </SECTION>

          非常糟糕:

          <Section>

          <p>這是一個段落。</p>

          </SECTION>

          推薦:

          <section>

          <p>這是一個段落。</p>

          </section>

          關閉所有 HTML 元素

          在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關閉標簽。

          不推薦:

          <section>

          <p>這是一個段落。

          <p>這是一個段落。

          </section>

          推薦:

          <section>

          <p>這是一個段落。</p>

          <p>這是一個段落。</p>

          </section>

          關閉空的 HTML 元素

          在 HTML5 中, 空的 HTML 元素也不一定要關閉:

          我們可以這么寫:

          <meta charset="utf-8">

          也可以這么寫:

          <meta charset="utf-8" />

          在 XHTML 和 XML 中斜線 (/) 是必須的。

          如果你期望 XML 軟件使用你的頁面,使用這種風格是非常好的。

          使用小寫屬性名

          HTML5 屬性名允許使用大寫和小寫字母。

          我們推薦使用小寫字母屬性名:

          • 同時使用大小寫是非常不好的習慣。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <div CLASS="menu">

          推薦:

          <div class="menu">

          屬性值

          HTML5 屬性值可以不用引號。

          屬性值我們推薦使用引號:

          • 如果屬性值含有空格需要使用引號。

          • 混合風格不推薦的,建議統一風格。

          • 屬性值使用引號易于閱讀。

          以下實例屬性值包含空格,沒有使用引號,所以不能起作用:

          <table class=table striped>

          以下使用了雙引號,是正確的:

          <table class="table striped">

          圖片屬性

          圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          定義好圖片的尺寸,在加載時可以預留指定空間,減少閃爍。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          空格和等號

          等號前后可以使用空格。

          <link rel = "stylesheet" href = "styles.css">

          但我們推薦少用空格:

          <link rel="stylesheet" href="styles.css">

          避免一行代碼過長

          使用 HTML 編輯器,左右滾動代碼是不方便的。

          每行代碼盡量少于 80 個字符。

          空行和縮進

          不要無緣無故添加空行。

          為每個邏輯功能塊添加空行,這樣更易于閱讀。

          縮進使用兩個空格,不建議使用 TAB。

          比較短的代碼間不要使用不必要的空行和縮進。

          不必要的空行和縮進:

          <body>

          <h1>菜鳥教程</h1>

          <h2>HTML</h2>

          <p>

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想,

          菜鳥教程,學的不僅是技術,更是夢想。

          </p>

          </body>

          推薦:

          <body>

          <h1>菜鳥教程</h1>

          <h2></h2>

          <p>菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。</p>

          </body>

          表格實例:

          <table>

          <tr>

          <th>Name</th>

          <th>Description</th>

          </tr>

          <tr>

          <td>A</td>

          <td>Description of A</td>

          </tr>

          <tr>

          <td>B</td>

          <td>Description of B</td>

          </tr>

          </table>

          列表實例:

          <ol>

          <li>London</li>

          <li>Paris</li>

          <li>Tokyo</li>

          </ol>

          省略 <html> 和 <body>?

          在標準 HTML5 中, <html> 和 <body> 標簽是可以省略的。

          以下 HTML5 文檔是正確的:

          實例:

          <!DOCTYPE html>

          <head>

          <title>頁面標題</title>

          </head>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          嘗試一下 ?

          不推薦省略 <html> 和 <body> 標簽。

          <html> 元素是文檔的根元素,用于描述頁面的語言:

          <!DOCTYPE html>

          <html lang="zh">

          聲明語言是為了方便屏幕閱讀器及搜索引擎。

          省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

          省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

          省略 <head>?

          在標準 HTML5 中, <head>標簽是可以省略的。

          默認情況下,瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

          實例

          <!DOCTYPE html>

          <html>

          <title>頁面標題</title>

          <body>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          </body>

          </html>

          嘗試一下 ?

          現在省略 head 標簽還不推薦使用。

          元數據

          HTML5 中 <title> 元素是必須的,標題名描述了頁面的主題:

          <title>菜鳥教程</title>

          標題和語言可以讓搜索引擎很快了解你頁面的主題:

          <!DOCTYPE html>

          <html lang="zh">

          <head>

          <meta charset="UTF-8">

          <title>菜鳥教程</title>

          </head>

          HTML 注釋

          注釋可以寫在 <!-- 和 --> 中:

          <!-- 這是注釋 -->

          比較長的評論可以在 <!-- 和 --> 中分行寫:

          <!--

          這是一個較長評論。 這是 一個較長評論。這是一個較長評論。

          這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。

          -->

          長評論第一個字符縮進兩個空格,更易于閱讀。

          樣式表

          樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

          <link rel="stylesheet" href="styles.css">

          短的規則可以寫成一行:

          p.into {font-family: Verdana; font-size: 16em;}

          長的規則可以寫成多行:

          body {

          background-color: lightgrey;

          font-family: "Arial Black", Helvetica, sans-serif;

          font-size: 16em;

          color: black;

          }

          • 將左花括號與選擇器放在同一行。

          • 左花括號與選擇器間添加以空格。

          • 使用兩個空格來縮進。

          • 冒號與屬性值之間添加已空格。

          • 逗號和符號之后使用一個空格。

          • 每個屬性與值結尾都要使用符號。

          • 只有屬性值包含空格時才使用引號。

          • 右花括號放在新的一行。

          • 每行最多 80 個字符。

          在逗號和分號后添加空格是常用的一個規則。

          在 HTML 中載入 JavaScript

          使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

          <script src="myscript.js">

          使用 JavaScript 訪問 HTML 元素

          一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

          以下兩個 JavaScript 語句會輸出不同結果:

          實例

          var obj = getElementById("Demo")

          var obj = getElementById("demo")

          HTML 中 JavaScript 盡量使用相同的命名規則。

          訪問 JavaScript 代碼規范。

          使用小寫文件名

          大多 Web 服務器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。

          其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

          你必須保持統一的風格,我們建議統一使用小寫的文件名。

          文件擴展名

          HTML 文件后綴可以是 .html (或r .htm)。

          CSS 文件后綴是 .css

          JavaScript 文件后綴是 .js

          .htm 和 .html 的區別

          .htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

          區別在于:

          .htm 應用在早期 DOS 系統,系統現在或者只能有三個字符。

          在 Unix 系統中后綴沒有特別限制,一般用 .html。

          技術上區別

          如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

          如果服務器只配置了 "index.html" 作為默認文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。

          但是,通常服務器可以設置多個默認文件,你可以根據需要設置默認文件嗎。

          不管怎樣,HTML 完整的后綴是 ".html"。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          版規則

          縮進

          使用2個空格縮進

          <ul>
            <li>Fantastic</li>
            <li>Great</li>
          </ul>
          .example {
            color: blue;
          }

          大小寫

          只允許使用小寫。

          所有的代碼都用小寫字母:適用于元素名,屬性,屬性值(除了文本和CDATA), 選擇器,特性,特性值(除了字符串)。

          <!-- 不推薦 -->
          <A HREF="/">Home</A>
          <!-- 推薦 -->
          <img src="google.png"
          alt="Google">

          行為空格

          建議刪除行尾白空格。

          <!-- 不推薦 -->
          <p>What?  </p>
          <!-- 推薦 -->
          <p>Yes please.</p>

          常規Meta規則

          編碼

          如果沒有特殊需求,一般采用utf-8編碼。如果是cms站點,則遵守該站點的編碼規則。

          <!-- 網頁編碼 -->
          <meta charset="utf-8">

          注釋

          盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

          注釋是否需要詳盡,取決于項目的復雜程度。

          一般單行注釋:

          <!-- col -->

          模塊間注釋:

          <!-- news -->
          <div class="news">
            <h2>News</h2>
            <p>...</p>
          </div>
          <!--/ news -->

          循環注釋:

          <ul>
            <!-- loop: new list -->
            <li>new's title 1</li>
            <li>new's title 2</li>
            <li>new's title 3</li>
            <li>new's title 4</li>
            <li>new's title 5</li>
            <!-- /loop: new list -->
          </ul>

          cms輸出注釋:

          <!-- cms: news list -->
          <ul>
            <li>new's title 1</li>
            <li>new's title 2</li>
            <li>new's title 3</li>
            <li>new's title 4</li>
            <li>new's title 5</li>
          </ul>
          <!-- /cms: news list -->

          Tab選項卡內容注釋:

          <!-- tab: news list -->
          <div class="tab"></div>
          <!-- /tab: news list -->

          常規HTML設計規則

          文檔類型

          使用html5文檔聲明,不再使用XHTML(application/xhtml+xml)。

          HTML5是目前所有HTML文檔類型中的首選:

          <!DOCTYPE html>

          HTML 的正確性

          編寫有效、正確的HTML代碼,否則很難達到性能上的提升。

          可以使用一些工具驗證你的代碼,如 W3C HTML validator

          HTML 的語義性

          根據HTML各個元素的用途而去使用它們。

          <!-- 不推薦 -->
          <div class="col">
            <div class="title">
          news</div>
            <p>list1</p>
            <p>list2</p>
            <p>list3</p>
          </div>
          <!-- 推薦 -->
          <div class="col">
            <h2 class="title">
          news</h2>
            <p>list1</p>
            <p>list2</p>
            <p>list3</p>
          </div>

          部分標簽說明:

          • div 主要用于布局,分割頁面的結構;
          • ul/ol 主要用于無序/有序列表;
          • dl/dt/dd 當頁面中出現第一行為類似標題/簡述,然后下面為詳細描述的內容時應該使用該標簽;
          • span 沒有特殊的意義,可以用作排版的輔助,然后在css中定義span;
          • h1-h6 標題, 根據重要性依次遞減;
          • h1 最重要的標題;
          • label 使表單更有親和力而且能輔助表單排版;

          不推薦使用的標簽:

          • font 文字的外觀,大小和顏色;
          • u 文本下劃線;
          • center 居中對齊;
          • s 刪除線;
          • strike 刪除線;
          • noframes 無視框時的內容;
          • iframe 定義嵌入視圖;
          • isindex 不建議使用(可搜尋,使用input代替);
          • dir 目錄式列舉;
          • menu 菜單列表;
          • basefont 定義基本字體;
          • applet 定義java程序;
          • frame 定義個別視框;
          • frameset 視框格式總定義;

          多媒體元素降級處理

          給多媒體元素,比如canvas、videos、 images增加alt屬性,提高可用性(特別是常用的img標簽,盡可量得加上alt屬性,提供圖片的描述信息)。

          <!-- 不推薦 -->
          <img src="world.jpg">
          <!-- 推薦 -->
          <img src="world.jpg"
          alt="our world images">

          type屬性

          在樣式表和腳本的標簽中忽略type屬性。

          HTML5默認type為text/css和text/javascript類型,所以沒必要指定。即便是老瀏覽器也是支持的。

          <!-- 不推薦 -->
          <link rel="stylesheet"
           href="//www.google.com/css/maia.css"
           type="text/css">
          <script src="
           //www.google.com/
           js/gweb/analytics/autotrack.js"
           type="text/javascript">
           </script>
          <!-- 推薦 -->
          <link rel="stylesheet"
           href="//www.google.com/css/maia.css">
          <script src="
           //www.google.com/
           js/gweb/analytics/autotrack.js">
           </script>

          HTML代碼格式規則

          每個塊元素、列表元素或表格元素都獨占一行,每個子元素都相對于父元素進行縮進。按設計稿劃分模塊,盡量使頁面模塊化,模塊與模塊之前要有清晰的注釋。

          如上面頁面框架,推薦寫法:

          <!-- hader -->
          <div class="header">header</div>
          <!-- /hader -->
          <!-- nav -->
          <div class="nav">nav</div>
          <!-- /nav -->
          <!-- main -->
          <div class="main">
            <!-- container -->
            <div class="container">
              <!--news-->
              <div class="news">
                <h2>news<h2>
                <p>...</p>
              </div>
              <!--news-->
            </div>
            <!--/container-->
            <!--sidebar-->
            <div class="sidebar">
          sidebar</div>
            <!--sidebar-->
          </div>
          <!--/main-->
          <!--footer-->
          <div class="footer">
          footer</div>
          <!--/footer-->

          HTML與SEO

          頁面良好層次

          保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

          <!-- 不推薦 -->
          <div class="logo">My Site</div>
          <div class="nav">
            <a href="#">Home</a>
            <a href="#">News</a>
            <a href="#">Mobile</a>
          </div>
          <div class="news">
            <div>News</div>
            <a href="#">
          news list 1</a>
            <a href="#">
          news list 2</a>
            <a href="#">
          news list 3</a>
          </div>
          <!-- 推薦 -->
          <h1 class="logo">My Site</h1>
          <ul class="nav">
            <li><a href="#">
          Home</a></li>
            <li><a href="#">
          News</a></li>
            <li><a href="#">
          Mobile</a></li>
          </ul>
          <div class="news">
            <h2>News</h2>
            <ul>
              <li><a href="#">
          news list 1</a>
          </li>
              <li><a href="#">
          news list 2</a>
          </li>
              <li><a href="#">
          news list 3</a>
          </li>
            </ul>
          </div>

          權重標簽使用

          H標簽使用

          • h1 權重高,體現當前網頁中相對比較重要的信息,但不宜過多,建議一個頁面只放一個;
          • h2 可以做副標題;
          • h3 可以做新聞列表;
          • h4-h6 可做相關新聞的列表標簽屬性完整;

          strong、b使用

          將需要加粗的文字使用b標簽來顯示。

          將需要強調的文字(主要指包含關鍵詞的信息)使用strong標簽來強調主要內容。

          注:b是粗體標簽,屬于實體標簽,它所包圍的字符將被設為bold(粗體);strong 是加重語氣標簽,屬于邏輯標簽,它的作用是加強字符語氣。

          標簽屬性使用

          在很多情況下,a都要使用title來說明該鏈接的相關說明或目的意義。

          例如:當使用overflow隱藏掉a中的溢出文字時,該a中的title是必不可少的,它可以告訴用戶被隱藏掉的文字內容是什么;又或者當一個圖片型鏈接出現時,該a中的title同樣是必不可少的,它可以告訴用戶這個圖片鏈接是做什么用的。

          注:僅在img里添加alt標簽在火狐提示文字是出不來的,alt是圖片加載失敗或未加載完全時顯示出來的提示文字,要想鼠標移上去顯示提示信息應該用title,嚴謹的寫法是img里加入alt和title這兩個標簽。

          精簡代碼

          代碼保持精簡,最優化,這樣搜索引擎才更喜歡。

          金定律

          永遠遵循同一套編碼規范 -- 可以是這里列出的,也可以是你自己總結的。如果你發現本規范中有任何錯誤,敬請指正。通過 open an issue on GitHub 為本規范添加內容或貢獻力量。

          不管有多少人共同參與同一項目,一定要確保每一行代碼都像是同一個人編寫的。

          語法

          • 用兩個空格來代替制表符(tab) -- 這是唯一能保證在所有環境下獲得一致展現的方法。

          • 嵌套元素應當縮進一次(即兩個空格)。

          • 對于屬性的定義,確保全部使用雙引號,絕不要使用單引號。

          • 不要在自閉合(self-closing)元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。

          • 不要省略可選的結束標簽(closing tag)(例如,</li></body>)。

          HTML5 doctype

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

          語言屬性

          根據 HTML5 規范:

          強烈建議為 html 根元素指定 lang 屬性,從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音,有助于翻譯工具確定其翻譯時所應遵守的規則等等。

          更多關于 lang 屬性的知識可以從 此規范 中了解。

          這里列出了語言代碼表。

          IE 兼容模式

          IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求,否則最好是設置為 edge mode,從而通知 IE 采用其所支持的最新的模式。

          閱讀這篇 stack overflow 上的文章可以獲得更多有用的信息。

          字符編碼

          通過明確聲明字符編碼,能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是,可以避免在 HTML 中使用字符實體標記(character entity),從而全部與文檔編碼一致(一般采用 UTF-8 編碼)。

          引入 CSS 和 JavaScript 文件

          根據 HTML5 規范,在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性,因為 text/csstext/javascript 分別是它們的默認值。

          HTML5 spec links

          • Using link

          • Using style

          • Using script

          實用為王

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

          屬性順序

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

          • class

          • id, name

          • data-*

          • src, for, type, href, value

          • title, alt

          • role, aria-*

          class 用于標識高度可復用組件,因此應該排在首位。id 用于標識具體組件,應當謹慎使用(例如,頁面內的書簽),因此排在第二位。

          布爾(boolean)型屬性

          布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值,但是 HTML5 規范不需要。

          更多信息請參考 WhatWG section on boolean attributes:

          元素的布爾型屬性如果有值,就是 true,如果沒有值,就是 false。

          如果一定要為其賦值的話,請參考 WhatWG 規范:

          如果屬性存在,其值必須是空字符串或 [...] 屬性的規范名稱,并且不要在首尾添加空白符。

          簡單來說,就是不用賦值。

          減少標簽的數量

          編寫 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;

          聲明順序

          相關的屬性聲明應當歸為一組,并按照下面的順序排列:

          1. Positioning

          2. Box model

          3. Typographic

          4. Visual

          由于定位(positioning)可以從正常的文檔流中移除元素,并且還能覆蓋盒模型(box model)相關的樣式,因此排在首位。盒模型排在第二位,因為它決定了組件的尺寸和位置。

          其他屬性只是影響組件的內部(inside)或者是不影響前兩組屬性,因此排在后面。

          不要使用 @import

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

          • 使用多個 <link> 元素

          • 通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件

          • 通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合并功能

          媒體查詢(Media query)的位置

          將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了,將來只會被大家遺忘。下面給出一個典型的實例。

          帶前綴的屬性

          當使用特定廠商的帶有前綴的屬性時,通過縮進的方式,讓每個屬性的值在垂直方向對齊,這樣便于多行編輯。

          在 Textmate 中,使用 Text → Edit Each Line in Selection (??A)。在 Sublime Text 2 中,使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line (??↓)。

          單行規則聲明

          對于只包含一條聲明的樣式,為了易讀性和便于快速編輯,建議將語句放在同一行。對于帶有多條聲明的樣式,還是應當將聲明分為多行。

          這樣做的關鍵因素是為了錯誤檢測 -- 例如,CSS 校驗器指出在 183 行有語法錯誤。如果是單行單條聲明,你就不會忽略這個錯誤;如果是單行多條聲明的話,你就要仔細分析避免漏掉錯誤了。

          簡寫形式的屬性聲明

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

          • padding

          • margin

          • font

          • background

          • border

          • border-radius

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

          在 MDN(Mozilla Developer Network)上一篇非常好的關于shorthand properties 的文章,對于不太熟悉簡寫屬性聲明及其行為的用戶很有用。

          Less 和 Sass 中的嵌套

          避免不必要的嵌套。這是因為雖然你可以使用嵌套,但是并不意味著應該使用嵌套。只有在必須將樣式限制在父元素內(也就是后代選擇器),并且存在多個需要嵌套的元素時才使用嵌套。

          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。

          • 在文件結尾添加一個空白行。


          主站蜘蛛池模板: 日韩一区二区三区视频久久| 精品免费国产一区二区| 国产免费一区二区三区| 高清一区高清二区视频| 在线精品亚洲一区二区小说| 国产精品成人99一区无码| 亚洲综合一区二区精品久久| 国偷自产av一区二区三区| 色系一区二区三区四区五区| 91视频一区二区三区| 无码精品一区二区三区在线| 国产一区二区精品尤物| 精品国产免费一区二区三区| 日本高清无卡码一区二区久久 | 日本人的色道www免费一区| 中文字幕日韩丝袜一区| 亚洲一区二区中文| 无码人妻精品一区二区三区66| 日本不卡一区二区视频a| 日韩人妻无码一区二区三区 | 暖暖免费高清日本一区二区三区| 99精品国产高清一区二区麻豆| 亚洲国产韩国一区二区| 一区二区三区视频| 怡红院AV一区二区三区| 国产一区二区三区小向美奈子 | 久久影院亚洲一区| 另类一区二区三区| 亚洲国产视频一区| 怡红院美国分院一区二区 | 波多野结衣一区二区三区高清在线| 女人18毛片a级毛片一区二区| 国产成人精品一区二区A片带套| 天天视频一区二区三区| 日韩免费一区二区三区| 中文字幕一区二区视频| 精品一区二区久久久久久久网站| 久久99精品波多结衣一区| 精品无人区一区二区三区在线| 精品国产福利在线观看一区| 国产成人高清视频一区二区 |