屬性順序

在使用 Tailwind CSS 或是 Master CSS 這類工具時，因為其特性是將屬性直接寫在 class 裡面，動輒就是數十個類名組合在一起，這個時候屬性的撰寫順序就十分重要。

舉個例子，下方的程式碼可以看到屬性非常地分散， fixed 後面接的不是定位的方向，而是寬度 w:full，定位相關的屬性 top:0、left:0 反而被放到後面，且 flex 相關語法也被拆開，這樣的屬性順序是很不一致的。

<header
  class="fixed w:full bg:fade-20 flex top:0 jc:space-between left:0 z:999 h:96 ai:center px:20 shadow:0|1|3|black/.3"
>
</header>

推薦順序

CSS 屬性撰寫順序可以參考這篇 文章，作者是 Bootstrap 的創建者，將 CSS 屬性分為五大類。

• Positioning
• Box model
• Typography
• Visual
• Misc

.declaration-order {
  // Positioning
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  // Box model
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;

  // Typography
  font: normal 14px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  text-decoration: underline;

  // Visual
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  // Misc
  opacity: 1;
}

試著將 header 透過上面的分類重新編排過，將定位相關的屬性放在一起 fixed top:0 left:0 z:999，flex 排版相關的屬性放在一起 flex jc:space-between ai:center，寬高放在一起 w:full h:96，背景相關的屬性放在一起 bg:fade-20 shadow:0|1|3|black/.3，重新編排過後看起來是不是一致多了呢？

<header
  class="fixed top:0 left:0 z:999 flex jc:space-between ai:center w:full h:96 px:20 bg:fade-20 shadow:0|1|3|black/.3">
</header>

總結

在使用 Tailwind CSS 或是 Master CSS 這類工具時，因為其特性是將屬性直接寫在 class 裡面，動輒就是數十個類名組合在一起，這個時候屬性的撰寫順序就十分重要，CSS 屬性撰寫順序可以參考這篇 文章。

參考

• Master CSS 官網
• Code Guide by @mdo