CSS 屬性宣告順序

admin發表於2019-01-16
CSS

倉稟實而知禮儀，衣食足而知榮辱，滿足基本的需求，就會追求更高的層次。

寫CSS程式碼大致也是如此的規律，入門階段，最大的滿足是能夠實現頁面正常展現。

屬性的宣告沒有任何規律可言，基本是想到哪寫到哪，隨著水平提高，逐漸對程式碼質量有了要求。

比如對於CSS程式碼效能的要求，CSS屬性宣告合理性排序的要求等。

程式碼效能的要求主要在選擇器的合理使用，具體參閱CSS 選擇器效能優化一章節。

本文介紹一下CSS屬性排序方面的規範，首先強調一點，CSS屬性的宣告順序與效能無關。

屬性宣告排序的重要性基於如下幾點原則：

（1）.整齊有序，有規律可循，對於團隊開發和後期維護有著重要意義。

（2）.從心理層面來看，對於寫程式碼或者維護程式碼者來說可能有更為舒心愉悅。

一.屬性排序規則：

（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）.文字排版（font, line-height, letter-spacing, color- text-align）

（6）.生成內容相關屬性（background, border）

特別說明：

（1）.上面並沒有列舉涵蓋所有的屬性，只是一部分。

（2）.分類之間使用一個空行分隔，後面會有程式碼例項演示。

（3）.並不一定嚴格遵循上述原則，因為這是一個最佳實踐，與標準和效能無關，並且有些屬性難以歸類，比如border-color是歸入盒模型相關還是裝飾性相關，所以只要保證整個開發團隊使用完全相同的一套CSS屬性排序規範，總體符合上述原則即可。

二.程式碼例項如下：

下面就以對一個連結元素進行一些相關的CSS設定來演示一下排序規則。

對連結A元素設定的目標是：

（1）.將其轉換為一個塊級元素，並設定恰當尺寸。

（2）.設定一定的內外邊距。

（3）.設定一定的背景色慾文字顏色。

（4）.去掉連結自帶的下劃線，文字居中顯示。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css">
.ant {
  display: block;

  margin: 1em 0;
  padding:1em 4em;

  width:100px;
  height:20px;
  border:0.25em solid #196e76;

  color:#fff;
  background:#196e76;
  box-shadow:inset 0.15em 0.15em 0.3em rgba(0,0,0,0.3), 
               0.3em 0.3em 0 #444;
 
  font-size:1em;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
}
</style> 
</head>
<body>
  <a class="ant">螞蟻部落</a>
</body>
</html>

上述程式碼就是按照前面講的原則對CSS屬性宣告排序，再強調如下兩點：

（1）.每一個分類用空行分隔。

（2）.排序規範不是硬性的，關鍵是一個團隊或者個人始終遵循共同一致的一套規範。

上述程式碼也可以修改成如下排序：

[CSS] 純文字檢視 複製程式碼
.ant {
  display: block;
  margin: 1em 0;
  padding:1em 4em;

  width:100px;
  height:20px;

  color:#fff;
  border:0.25em solid #196e76;
  background:#196e76;
  box-shadow:inset 0.15em 0.15em 0.3em rgba(0,0,0,0.3), 
               0.3em 0.3em 0 #444;
 
  font-size:1em;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
}

完全沒有問題，還是那句話，不是硬性規定，團隊遵循同一套規範。

三.CSS屬性排序總結：

[CSS] 純文字檢視 複製程式碼
.ant {
  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: ;
}

上面是常見CSS屬性的一些排序最佳實踐，可以做一下參考。

相關文章