CSS中屬性的書寫順序

iDotNetSpace發表於2009-02-25
CSS

傳說中的Mozilla推薦

/* mozilla.org Base Styles
* maintained by fantasai
*/
/* Suggested order:
* display
* list-style.
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
...

來源：http://www.mozilla.org/css/base/content.css

在懌飛’s Blog的這篇文章裡，又將上面的屬性分成了三組：顯示屬性、自身屬性和文字屬性。在回覆裡，inG補充這還和瀏覽器的解析過程有關：瀏覽器先對DOM定位，然後解析自身屬性，接著再解析內部物件。（沒找到相關的英文資料，有知情者還望告知）

在Mozilla官方，其實並沒有推薦任何CSS書寫順序。很可能是某個開發者在閱讀fantasai的這篇文章 mozilla.org Markup Reference 時，順便對fantasai的CSS原始檔產生了興趣，因此才有了上面的發現。

字母排序

NETTUTS上時不時有些好文章，這不，前不久，Trevor Davis就分享了一篇：5 Ways to Instantly Write Better CSS. 這篇文章中，推薦CSS的屬性按字母排序。

優點是：簡單，任何人只要遵守，一看就明白。

缺點是：太簡單，缺乏邏輯性。比如position, left, top等，這種緊關聯的屬性，如果都按字母排序，書寫和維護起來都不方便。

Andy Ford推薦的排序

Andy Ford是HTML和CSS方面的專家，最近寫了一篇文章：Order of the Day: CSS Properties. 文章推薦的CSS書寫順序為：

 1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6. Backgrounds
7. Opacity, Cursors, Generated Content

例子：

el {
display: ;
visibility: ;
float: ;
clear: ;
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style. ;
border-top-style. ;
border-right-style. ;
border-bottom-style. ;
border-left-style. ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
outline: ;
list-style. ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform. ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
opacity: ;
cursor: ;
content: ;
quotes: ;
}

Andy的順序大體上和fantasai推薦的順序保持了一致，但細節上更具可操作性。

SitePoint上還有個很熱烈的討論貼：How do you order your properties within a declaration block?

我的想法

我喜歡fantasai和Andy的書寫順序，但fantasai的順序中，“自身”屬性有點含混不清，Andy的則太細，難以記住。我覺得可以借鑑CSS 2.1 Specification中對CSS屬性的分類，將Andy的順序稍微調整下：

  1. 影響文件流的屬性（比如：display, position, float, clear, visibility, table-layout等）
  2. 自身盒模型的屬性（比如：width, height, margin, padding, border等）
  3. 排版相關屬性（比如：font, line-height, text-align, text-indent, vertical-align等等）
  4. 裝飾性屬性（比如：color, background, opacity, cursor等）
  5. 生成內容的屬性（比如：content, list-style, quotes等）

事情永遠沒那麼簡單，比如下面這些困擾：

  1. 對於shorthand怎麼處理？比如 border: 1px solid red; 其中border-width是和盒模型相關的，但border-color是裝飾性的。如何組織呢？
  2. 考慮到換膚功能，是否應該將color, background, border-color等和顏色相關的都放一塊？以方便以後修改。
  3. 對於hacks如何處理？單獨放到css檔案最後面，還是和hack的屬性緊挨著好？
  4. 維護同事的css檔案時，對於新增加或有修改的屬性，如何註釋？如何書寫？
  5. 還有，考慮到CSS Sprite, 所有背景圖的選擇器都放在一起？不過這已經超出本文的話題了：CSS選擇器內屬性的順序和組織。
  6. 更進一步的討論是：CSS檔案內的結構組織，以及多個CSS檔案的組織。

任何解決方案都不能解決所有問題，但只要能解決常用的大部分問題，就已經是非常好的方案了。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-557794/，如需轉載，請註明出處，否則將追究法律責任。

相關文章