閱讀(37.1k) 書簽贊(0) 我要糾錯

聲明順序

2018-02-24 15:11 更新

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

堅持以字母順序排列；
以類型（position,?display,?colors,?font, miscellaneous…）順序排列；

這兩種方式各有利弊。一方面，字母排序方式通俗易懂（至少對于語言中使用拉丁字母的人來說），所以排序的過程完全沒有爭議。但是，這種排序的結(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;
}

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

.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;
}

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

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