CSS 選擇器過度嚴謹？性能與維護性的平衡之道

現象

代碼中大量使用層層嵌套選擇器：
.header .nav .list .item .link .icon

三大代價

1. 瀏覽器匹配成本高：CSS 選擇器從右向左匹配，越長路徑越慢。
2. 耦合 HTML 結構：增減一層 <div> 即須改 CSS。
3. 優先級戰爭：後期覆蓋樣式需更高優先級，陷入 !important 泥潭。

最佳實踐：BEM / Utility-First / CSS-in-JS

• BEM 命名：.nav__item--active 扁平化，無嵌套，語義清晰。
• Utility-First (Tailwind)：class="flex items-center gap-2 text-blue-500"，樣式內聚，無需命名。
• CSS Modules / Styled-Components：作用域隔離，組件級別，天然避免衝突。

重構前後對比

/* 重構前：深層嵌套 */
.header .nav .list .item .link:hover { color: red; }

/* 重構後：BEM 扁平 */
.nav__link:hover { color: red; }

/* 或 Tailwind */
...

原則

「選擇器深度 ≤ 3 層，優先用類名直達元素，結構變化不改 CSS。」