別掉入 Combo Class 的滾雪球陷阱：Webflow Client-First 核心架構哲學與樣式邊界實戰

前言：從一個常見的排版難題說起

在進行高階 Webflow 專案開發時，團隊經常面臨一個靈魂拷問：「當全站已經有了統一的 H1、H2 規範，但在特定頁面（例如 Insights 或活動頁）需要特殊排版時，我們該如何命名與管理樣式？」

初學者最常見的下意識反應，就是在既有的 heading-h1 後方疊加一個 Combo Class（組合類名），例如：heading-h1.is-insights。接著如果又需要改顏色或調整間距，就繼續疊加 .large、.no-margin……直到整個 Class 面板被長串的組合樣式淹沒。

今天我們就從業界公認最嚴謹的 Client-First 樣式架構哲學出發，深度剖析為什麼這種「滾雪球」的做法會成為日後維護的惡夢，以及資深 Webflow 架構師是如何界定「全域規範」與「局部組件」的邊界。

一、為什麼 Client-First 強烈反對 Combo Class 滾雪球？

Webflow 的視覺化介面非常強大，但其底層本質仍然是原生 CSS 的層疊機制（Cascading & Specificity）。濫用 Combo Class 會帶來三大致命代價：

1. 特異性陷阱（Specificity Hell）：在 Webflow 中，Combo Class 具有不可逆的層疊順序。一旦你在 A 頁面用 heading-h1.is-insights 覆蓋了字級，日後若在 Style Guide 微調了全站 heading-h1，該頁面極可能發生非預期的樣式錯亂。
2. 無法跨頁面重用（Zero Portability）：掛載在特定基礎類名之下的 Combo，無法被自由搬移到其他非 heading-h1 的標籤上。
3. AI 代理認知斷層（Agent Drift）：現代 AI 代理（如 Cursor, Claude, Antigravity 透過 Webflow MCP）在解析畫布時，面對 3~4 層無語意的 Combo Class 會極難判定樣式的繼承意圖，進而產生更多冗餘的髒代碼。

二、Client-First 的三層樣式架構哲學

在嚴謹的 Client-First 規範中，樣式被清晰劃分為三個層級，彼此權責分明：

1. 全站底層 HTML 標籤（HTML Tag Level）

在專屬的 Style Guide 頁面上，直接將樣式設定在最純粹的 HTML 標籤（All H1 Headings、All H2 Headings、All Paragraphs）。

核心價值：任何地方只要拖入一個 <h1>，在完全不賦予任何 Class 的情況下，就已經天然繼承了品牌字體（如 Muli 或 Abril Fatface）、字重、預設行高與主碳黑（--black: #121316）。

2. 全域功能類（Global Utility Classes）

例如 heading-style-h1、heading-style-h2、text-color-highlight、container-large。

核心價值：實現「語意結構」與「視覺表現」的徹底解耦。例如基於 SEO 考量該節點必須是語意上的 <h2>，但在視覺衝擊力上需要呈現主標題字階時，只需套用 heading-style-h1。

3. 特殊頁面情境：兩條清晰的決策路徑

當你在特定頁面（如 Insights）遇到非通用排版時，Client-First 提供了兩條嚴格的決策標準：

• 路徑 A：純粹的單一屬性微調 ➔ 使用 Utility Combo
  如果僅僅是將標題文字改為莫蘭迪薄荷綠，或文字置中對齊，允許在基礎類名後疊加單一目的之功能類（如 heading-style-h1 + text-color-highlight）。
• 路徑 B：複雜或排版型差異 ➔ 建立獨立組件類（Component Class）
  （最推薦） 如果 Insights 的標題帶有專屬的螢光筆底紋（Highlight Accent）、特殊的裝飾線條或獨特的響應式間距，直接將其定義為組件類名：insights-hero_title。

黃金法則：與其在全域標題後疊加一堆補丁，不如讓該區塊擁有獨立的命名空間。這樣一來，無論你如何精雕細琢 Insights 的裝飾細節，永遠不會破壞全站其他頁面；未來全站字階更新時，也不會發生非預期的意外跑版。

三、全站重構時的「全域」與「局部」邊界守則

當我們對現有頁面進行樣式重整時，必須以「全站視角」建立清晰的兩大陣營：

陣營分類	包含要素	架構管理原則
全域共用層 (Global)	Container 寬度 (940px / 1080px)、色彩變數 (Tokens)、Navbar、Footer	全站 100% 絕對統一，任何頁面嚴禁自創私有變體。
頁面組件層 (Component)	文章卡片 (insights_card)、篩選欄 (insights_filter)、特色網格	賦予獨立命名空間前綴，自由客製、獨立迭代、不污染全域。

四、結語：給現代數位工匠的思考

在 AI 輔助開發（Agentic Webflow Development）蔚為主流的 2026 年，寫代碼的邊際成本已經大幅降低，但「架構的一致性與邊界清晰度」卻變得前所未有地關鍵。

懂得何時該抽象出全域資產，何時該劃清組件邊界，正是區分「業餘拼貼」與「高階數位工藝」的分水嶺。守護好你的 Style System，未來的 AI 才能真正成為你最得力的擴音器，而非製造髒代碼的混亂之源。