CSS 命名技巧

介紹抽象化命名及元件形體命名

命名技巧用在開發上，為了更好維護，為了讓class複用性更高，以下幾種原則介紹:

抽象化命名

使用主要色、次要色及強調色來概括指定色彩，目的是為了，後續色彩修改上更方便維護:

.text-primary {
  color: blue;
}

.text-accent {
  color: red;
}

避免使用單一色彩來命名，假若顏色後期需要更改，會變得很麻煩:

/* 避免 */
.text-blue{
  color: blue;
}

.text-red {
  color: red;
}

使用抽象化的尺寸來做調整(ex.L、M、S)(此處為常使用的命名方式)

.m-t-l {
  margin-top: 50px;
}
.m-t-m {
  margin-top: 30px;
}
.m-t-s {
  margin-top: 10px;
}

避免直接用數值來命名，假若後期需要更改，同樣變得很麻煩:

/* 避免 */
/* px直接命名，如果px更改了，命名也同樣需要修改... */
.m-t-50 {
  margin-top: 50px;
}
.m-t-30 {
  margin-top: 30px;
}
.m-t-10 {
  margin-top: 10px;
}

以下直接引用卡斯伯老師的鐵人賽 5 - CSS 的命名技巧排版範例來做詳細命名介紹:

初期排版的範例以他所在的位置或功能性來命名，左側是選單，右側比較大的空間是主要文章，如 .menu、.article。

但實際上側面欄不會只有放選單；右方的主要內容可能也不是文章，可能會有產品、廣告、文件等其他內容，所以我們可以將命名做一些調整，用頁面上所在的位置命名，例如側面叫做 .side，主要內容區域叫做 .content 。

接下來，下方增加了 .ad 的區塊，寬度佔 1/3 和 .side 相同，由於是後來新增的區塊，直接稱為 .side 不太適合，所以就直接命名為 .ad。

這個時候，如果直接用 12欄的命名方法(網站一般以12分法區分)來命名，這樣網格的可用性就會變得更高。(此處為常使用的命名方式)