# CSS Nesting

### 不用 SCSS 後的好處與壞處

好處：

* 專案不用再關心 scss 版本問題、package.json 問題，減少依賴。
* 開發時不用再多等 CSS 預處理器，因為現在變成給瀏覽器解析。

壞處：

* 目前原生 CSS 仍然沒有辦法有判斷跟迴圈等進階功能。

### 基礎寫法

原生 CSS 巢狀寫法目前有兩種，跟 SCSS 很類似，例如 [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting) 提供的範例：

```css
/* 第一種 */
parent {
    child {
    }
}

/* 第二種 */
parent {
    & child {
    }
}

/* 兩種寫法最後都會解析成 */
parent {}
parent child {}
```

加不加 & 看團隊，我個人是盡量少加一些奇怪的符號，但 Mozilla 給了加 & 三個優點：

* 方便加偽元素
* 向後相容
* 視覺化：看到 & 就知道是子元素

### 選擇同級的 DOM

```css
h2 {
  color: tomato;
  + p {
    color: white;
  }
}
/* 同上一節，也可以寫成以下 */
/* 
h2 {
  color: tomato;
  & + p {
    color: white;
  }
}
*/
```

### 選擇加在自身上的 classname

```css
h2 {
  color: tomato;
 &.green {
    color: green;
  }
}

```

### 選擇有上一層的 classname

```css
.foo {
  /* .foo styles */
  .bar & {
    /* .bar .foo styles */
  }
}
```

### 媒體選擇器等其他 @ 開頭的選擇器

```css
.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
    @media (min-width: 1024px) {
      max-inline-size: 1024px;
    }
  }
}
```

{% hint style="danger" %}
注意，因為 @media 或是 @container 裡，不能使用 CSS Variables，所以必須先行規定 Breakpoint。
{% endhint %}
