聲明順序

難以想象竟有這么多關(guān)于劃分 CSS 聲明順序的討論。具體而言，有如下兩派：

• 堅(jiān)持以字母順序排列；
• 以類型（position,?display,?colors,?font, miscellaneous…）順序排列；

這兩種方式各有利弊。一方面，字母排序方式通俗易懂（至少對(duì)于語言中使用拉丁字母的人來說），所以排序的過程完全沒有爭(zhēng)議。但是，這種排序的結(jié)果卻十分奇怪，如?bottom?和?top?竟然彼此不相鄰。為什么?animations?屬性出現(xiàn)在display?屬性之前？字母排序方式有太多諸如此類的怪相了。

.foo {
  background: black;
  bottom: 0;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  height: 100px;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 100px;
}

另一方面，按照類型排序則讓屬性顯得更具有意義。每個(gè)和字體相關(guān)的屬性被聲明在一起，top?和?bottom?也結(jié)合在一起，最終審閱CSS規(guī)則集感覺就像是在讀故事。除非你堅(jiān)持諸如?Idiomatic CSS的規(guī)定，不然類型聲明順序可以有更豐富充實(shí)的表現(xiàn)。white-space?應(yīng)該放在哪里：font還是dispaly??overflow?應(yīng)該歸屬何處？如何進(jìn)行組內(nèi)排序（如果是字母排序，這豈不成了個(gè)笑話）？

.foo {
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  background: black;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

此外也有其他類型排序的分支，比如Concentric CSS，他看起來相當(dāng)流行。Concentric CSS 的基礎(chǔ)是依賴盒模型定義順序：由外而內(nèi)。

.foo {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: black;
  overflow: hidden;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

我必須說我不能對(duì)此下任何判定。一份?CSS-Tricks 做的統(tǒng)計(jì)報(bào)告確認(rèn)，超過 45% 的開發(fā)者使用類型順序聲明，而只有 14% 使用字母順序。此外還有 39% 的開發(fā)者隨意而為，這其中就包括我。

圖表展示了開發(fā)者排列 CSS 聲明順序的方式

因此，我不會(huì)在此強(qiáng)加規(guī)范選擇怎樣的聲明順序。只要你長(zhǎng)久的在自己的樣式表中保持一致的風(fēng)格，那么選擇喜歡的聲明順序就可以了（也就說不要太隨便）。

最新研究?表明，使用CSS Comb?(按照類型排序) 對(duì) CSS 進(jìn)行排序，按類型順序聲明，Gzip 壓縮文件大小平均達(dá)到 2.7%,而按字母順序排序壓縮的文件大小平均達(dá)到 1.3%。

擴(kuò)展閱讀

• CSS Comb
• Concentric CSS
• Idiomatic CSS
• On Declaration Sorting
• Reduce File Size With CSS Sorting
• Poll Results: How Do You Order Your CSS Properties?