# 為什麼在 React 專案使用 scss 管理 UI 是一件痛苦的事

## Case 1 同名 class 搜尋地獄

假設今天要修改這個畫面, 目標是把跑版的股名排版修改成上下兩排, 也就是不要水平 flex 排版
首先這裡的版面是由這個 stylesheet(card.scss) 控制:


進入 card.scss


但在修改前應該先確認這個 style 是否有在別處被使用, 避免改壞其他元件
Ctrl + Shift + F 全域搜尋後，出現以下結果:

由於 scss 允許巢狀式 class 繼承寫法, 例如:

.card {
    &__header {
        display: flex;
        // ...style
      }
}

因此還得再搜尋是否在 `.card {}` 底下有 `&__header`,
或是 `.card__header`, 搜尋後又出現許多結果:

經過排查後, 可喜可賀, 有兩個 css 檔案出現了 card__header:


現在來猜猜剛剛搜尋到在 component 使用中的 card__header 分別對應到哪個 stylesheet 吧:


這是 card-container card__header, 因此這個檔案屬於 card.scss

這也是 card-container card__header, 因此這個檔案屬於 card.scss

這也是 card-container card__header, 因此這個檔案屬於 card.scss

這是一個被當成 list 項目來 render 的元件, 所以還要往上查...

### 結論
到這邊我已經受不了了XD, 反正我要的只是在那個特定的頁面呈現不一樣的 style
因此要嘛加一個新的 css 規則來擾亂秩序, 要嘛直接 inline...

可以知道的是由於 scss 的自由度與全域性使得調查哪個 component 使用了哪條 css 規則是非常困難且痛苦的

就 React 專案來說, UI 控制應以元件為核心來管理, 每個元件應該要盡量能夠獨立運作, 不要依賴或被其他元件影響

但因 scss 可以巢狀撰寫 css 規則, 導致 React 元件要判斷 class 如何作用時還得往上找母元件來檢查有沒有使用特定的 class, 元件之間產生相依性, 超難維護, 更別提去排查大量相同命名了, 而且這個動作可能換了個人維護他也得再排查一次...