總是被命名困擾？花費太多時間在命名上…

相信看到標題很多人同感身受，因為我自己也是過來人…
常見的命名規則有三種：

1. OOCSS
2. SMACSS
3. BEM

我們這裡不詳談命名的規則，這裡以我個人常用的命名規則（BEM）來演示。
舉個例子，今天要針對產品區塊進行切版：

<div class="product">
  <div class="product__main">
    <h2 class="product__title">產品名稱</h2>
	<p class="product__description">產品描述產品描述產品描述</p>
  </div>
<div>

.product {
  max-width: 320px;
  margin: 0 auto;
  background-color: #e5e7eb;
}

.product__main {
  padding: 1rem;
}

.product__title {
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.product__description {
  color: #dc2626;
}

從上面 CSS 程式碼我們可以看出對於命名我們都會語意化，方便我們容易理解、好維護。

這時候肯定就有人會納悶，我要修改 h2 、 p 標籤應該不需要額外命名，可以直接去指定 product__main 底下的 h2 、p 標籤。
這樣的寫法沒有錯，但假設 product__main 底下不只一個 h2 或 p 就會導致與設計稿不符。

.product__main h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.product__main p {
  color: #dc2626;
}

改寫成 Tailwind CSS 寫法

<div class="max-w-xs mx-auto bg-gray-200">
  <div class="p-4">
    <h2 class="text-2xl text-center mb-2">產品名稱</h2>
	<p class="text-red-600">產品描述產品描述產品描述</p>
  </div>
</div>

1. 省去命名時間
2. 不需要撰寫冗長的 CSS
3. 重複性 class 名稱

codepen 連結

本日重點

1. 不論使用哪種命名規則，好維護、增加可讀性十分重要。
2. Tailwind CSS 解決命名困擾、有重複性 class 名稱能夠使用、提升開發效率。

參考

• 命名規則 - OOCSS、SMACSS、BEM
• Tailwind CSS 官網