傳說中的Mozilla推薦

/* mozilla.org Base Styles* maintained by fantasai*/ /* Suggested order:* display* list-style* position* float* clear* width* height* margin* padding Technorati 標簽: CSS * 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 & Flow2. Positioning3. Dimensions4. Margins, Padding, Borders, Outline5. Typographic Styles6. Backgrounds7. 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的順序稍微調整下：

影響文檔流的屬性（比如：display, position, float, clear, visibility, table-layout等）

自身盒模型的屬性（比如：width, height, margin, padding, border等）

排版相關屬性（比如：font, line-height, text-align, text-indent, vertical-align等等）

裝飾性屬性（比如：color, background, opacity, cursor等）

生成內容的屬性（比如：content, list-style, quotes等）

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

對于shorthand怎么處理？比如 border: 1px solid red; 其中border-width是和盒模型相關的，但border-color是裝飾性的。如何組織呢？

考慮到換膚功能，是否應該將color, background, border-color等和顏色相關的都放一塊？以方便以后修改。

對于hacks如何處理？單獨放到css文件最后面，還是和hack的屬性緊挨著好？

維護同事的css文件時，對于新增加或有修改的屬性，如何注釋？如何書寫？

還有，考慮到CSS Sprite, 所有背景圖的選擇器都放在一起？不過這已經超出本文的話題了：CSS選擇器內屬性的順序和組織。

更進一步的討論是：CSS文件內的結構組織，以及多個CSS文件的組織。

轉載于:https://www.cnblogs.com/mygoare/archive/2010/08/14/1799510.html

總結

以上是生活随笔為你收集整理的CSS中属性的书写顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。