Google HTML/CSS 代碼風格指南

來源:互聯網
上載者:User
文章目錄
  • 後話

Google 今日發布 HTML/CSS 代碼風格指南 (Google HTML/CSS Style Guide), 事實上這不是一套完整的開發規範, 我們可以認為是一份簡單的開發建議.

與我在《使用 Google Closure Linter 校正 JavaScript 代碼》中提到的 Google JavaScript Style Guide 一樣, 這份只能內容很少, 我用了不到一個小時就看完了, 從這份短小的代碼風格指南找到一些有意思的內容. 下文我會列舉兩項.

省略資源檔的協議

建議省略掉圖片, 媒體檔案, 樣式和指令碼 URL 中的協議部分 (http:, https:), 省略掉協議部分後, 資源檔將繼承頁面 URL 的協議. 不但可以防止內容混用的問題, 還可以減小頁面的尺寸. 比如: 引用一個 JavaScript 檔案可以用下面建議的方式來寫.

省略掉可選的標籤

用過 Dreamwave 的同學應該有印象, 當你建立一個 HTML 檔案, 預設有代碼如下.

<html> <head> </head>   <body> </body> </html>

我們會將 title, 外部 CSS 和 JavaScript 引用放在 head 地區, 在頁面上展示的內容放在 body 裡面, 但其實 html, headbody 都是可省略的標籤.

將這些可選標籤刪除之後, 看起來很怪, 但頁面顯示正常, W3C 檢測也能通過. 我已經在部落格上這樣處理了. 但有一點需要注意的, 如果你希望用 XHTML 編寫頁面, 那麼請保留 html 標籤, 因為你仍需要下面這句代碼作為聲明.

<html xmlns="http://www.w3.org/1999/xhtml">
後話

Google 的 HTML/CSS 代碼風格指南是一個短小精悍的建議性代碼編寫手冊, 很有用, 但請不要迷信. 像裡面有一項, 建議使用兩個空格作為縮排, 在很多團隊可能不具有可行性, 我們團隊現在用的還是 tab.

該手冊中很多 HTML 建議都是針對 HTML5 的, 但這裡是用 HTML 風格而非 XHTML 風格, 很多地方為了省略代碼實際上削弱了代碼的可讀性, 大家應該對其取捨有所判斷.

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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