CSS 實現「表現與內容分離」的真諦：不只是抽離樣式文件

很多初學者認為 CSS 分離只是「把 style 寫到單獨 .css 文件，HTML 里用 class 引用」。其實分離的核心是變更隔離：修改樣式不動 HTML，修改結構不改 CSS，兩者低耦合。

傳統混寫模式的痛點

<!-- 惡夢級維護 -->
<font color="red" size="5" face="微軟雅黑">標題</font>
<table border="1" cellpadding="5" bgcolor="#f0f0f0">...</table>
<div style="margin-left:20px; background:url(...) repeat-x; border:1px solid red">...</div>

• 改個顏色要在 50 個頁面各改一次
• 改結構（如 table → div）樣式全亂
• 團隊協作：前端改樣式、後端改邏輯，Git 衝突不斷

CSS 分離的三個層次

層次一：物理分離（入門）

<link rel="stylesheet" href="style.css">
// style.css
.title { color: red; font-size: 24px; font-family: "Microsoft YaHei"; }
.data-table { border-collapse: collapse; background: #f0f0f0; }
.data-table td { padding: 5px; border: 1px solid #ddd; }

優點：複用、集中維護。缺點：HTML 仍需寫 class="title"，耦合在「類名」上。

層次二：語義化類名（進階）

<!-- HTML 表達「是什麼」 -->
<h1 class="page-title">產品介紹</h1>
<table class="product-spec">...</table>

// CSS 表達「長什麼樣」
.page-title { ... }
.product-spec { ... }

類名描述業務語義而非視覺（.red-big-text ❌，.page-title ✅）。換皮膚時只改 CSS，HTML 不動。

層次三：架構級分離（專業）

• BEM / ITCSS / CUBE CSS 方法論規範類名結構
• CSS 變量 集中管理設計令牌（色板、間距、字體）
• Utility-First (Tailwind) 或 CSS-in-JS 另一種分離哲學
• 組件庫：HTML 結構封裝在組件內，外部只傳 Props，樣式完全內部化

「至少要調用」不是反駁理由

「HTML 里總得寫 class/id 引用 CSS，這不算完全分離」

這是誤解。分離 ≠ 零依賴，而是單向依賴：

• HTML 依賴 CSS（通過語義類名）
• CSS 不依賴 HTML 結構（不寫 div > table > tr > td { } 這種強結構選擇器）
• 修改 CSS 不破壞 HTML 功能；修改 HTML 結構（語義不變）不破壞樣式

實戰原則

1. 類名按「組件/模塊/狀態」命名：.btn--primary、.card__title--highlight
2. 避免標籤選擇器：h1 { } → .page-title { }
3. 避免深層後代選擇器：.header .nav .list .item { } → .nav__item { }
4. 佈局與組件分離：佈局類（.grid、.flex）只管佈局，不管顏色邊框
5. 設計令牌變量化：:root { --color-primary: #0066cc; --spacing-md: 16px; }

真正的分離，是改需求只改一處：換色改變量，換佈局改佈局類，換文案改模板，互不干擾。