文章目錄
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
, head
和 body
都是可省略的標籤.
將這些可選標籤刪除之後, 看起來很怪, 但頁面顯示正常, W3C 檢測也能通過. 我已經在部落格上這樣處理了. 但有一點需要注意的, 如果你希望用 XHTML 編寫頁面, 那麼請保留 html
標籤, 因為你仍需要下面這句代碼作為聲明.
<html xmlns="http://www.w3.org/1999/xhtml">
後話
Google 的 HTML/CSS 代碼風格指南是一個短小精悍的建議性代碼編寫手冊, 很有用, 但請不要迷信. 像裡面有一項, 建議使用兩個空格作為縮排, 在很多團隊可能不具有可行性, 我們團隊現在用的還是 tab.
該手冊中很多 HTML 建議都是針對 HTML5 的, 但這裡是用 HTML 風格而非 XHTML 風格, 很多地方為了省略代碼實際上削弱了代碼的可讀性, 大家應該對其取捨有所判斷.