/* 一般CSS寫法 */
selector { 
  property: value;
}

/* Tailwind寫法 */
`[property]-[value]`

CSS Cascade 與 Specificity

Cascade : 多個 CSS 規則同時存在時，瀏覽器如何決定使用哪一個。

Specificity : 每個 selector 的權重計算方式。

Cascade = 當多個 CSS 規則同時作用時，瀏覽器如何決定「哪一個生效」，priority 排序如下

1. 來源與重要性
   來源指的是樣式從哪裡來：瀏覽器預設（user-agent）、使用者自訂（user）、網站作者（author）;
   而重要性指的是!important。
2. 行內樣式（style=""）
3. Cascade Layers（@layer）
4. Specificity（選擇器權重）
5. 出現順序（Source Order）

點我前往 MDN超詳細CSS Cascade說明

考慮以下程式碼，為什麼結果會是red呢? 因為: .class > element

p {
  color:blue;
}

.text {
  color:red;
}

CSS Specificity（選擇器權重）

Specificity 是 選擇器的權重計算方式 在進行每一次的priority比較時，CSS 會計算一個 三位數權重(0,0,0)

如果 selector 更複雜：

div .text {
  color:green;
}

權重：

div .text

div = 0,0,1
.text = 0,1,0

total = 0,1,1

比較：

結果：

div .text 勝出

在大型專案常出現：

.header .nav .menu .itemspan {
  color:red;
}

這就是 specificity war，當你想覆蓋時，會變得越來越長、越來越難維護

Base CSS

Base Styles = reset + normalize + default style

• 統一不同瀏覽器的預設樣式
• 提供一個乾淨且一致的起點，方便開發

Reset CSS

Reset 的目標是把瀏覽器的預設樣式「全部清掉」。

* {
  margin:0;
  padding:0;
}

缺點：

• 會把很多 有用的預設行為也刪掉
• 例如 button, input, list 樣式

Normalize CSS

Normalize 與 reset 最大的差異在於：

不要全部清掉，只修正瀏覽器之間不一致的地方

例如 normalize.css

h1 {
  font-size:2em;
}

• 保留合理預設
• 修正 Chrome / Safari / Firefox 差異

Default Style

這其實是 設計系統的一部分。

在 reset / normalize 後，通常會加上：

body {
  font-family:system-ui;
  color: #111;
}

a {
  text-decoration:none;
}

它不是瀏覽器的，而是 專案設計規範。

Tailwind - Preflight

Tailwind採用的不是base.css，是Preflight = reset + normalize + modern base style

modern reset + normalize 混合版

例如 Tailwind 會做：

* {
  box-sizing:border-box;
}
img {
  display:block;
  max-width:100%;
}
button {
  background:transparent;
}

這些都在 base layer。