傳說中的Mozilla推薦

/* mozilla.org Base Styles* maintained by fantasai*/ /* Suggested order:* display* list-style* position* float* clear* width* height* margin* padding Technorati 標(biāo)簽: 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的這篇文章里，又將上面的屬性分成了三組：顯示屬性、自身屬性和文本屬性。在回復(fù)里，inG補(bǔ)充這還和瀏覽器的解析過程有關(guān)：瀏覽器先對(duì)DOM定位，然后解析自身屬性，接著再解析內(nèi)部對(duì)象。（沒找到相關(guān)的英文資料，有知情者還望告知）

在Mozilla官方，其實(shí)并沒有推薦任何CSS書寫順序。很可能是某個(gè)開發(fā)者在閱讀fantasai的這篇文章 mozilla.org Markup Reference 時(shí)，順便對(duì)fantasai的CSS源文件產(chǎn)生了興趣，因此才有了上面的發(fā)現(xiàn)。

字母排序

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

優(yōu)點(diǎn)是：簡單，任何人只要遵守，一看就明白。

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

Andy Ford推薦的排序

Andy Ford是HTML和CSS方面的專家，最近寫了一篇文章：Order of the Day: CSS Properties. 文章推薦的CSS書寫順序?yàn)?#xff1a;

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推薦的順序保持了一致，但細(xì)節(jié)上更具可操作性。

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

我的想法

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

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

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

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

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

生成內(nèi)容的屬性（比如：content, list-style, quotes等）

事情永遠(yuǎn)沒那么簡單，比如下面這些困擾：

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

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

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

維護(hù)同事的css文件時(shí)，對(duì)于新增加或有修改的屬性，如何注釋？如何書寫？

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

更進(jìn)一步的討論是：CSS文件內(nèi)的結(jié)構(gòu)組織，以及多個(gè)CSS文件的組織。

轉(zhuǎn)載于:https://www.cnblogs.com/mygoare/archive/2010/08/14/1799510.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。