# Day 60：前端切版重構技術筆記 **Published by:** [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/) **Published on:** 2026-02-13 **URL:** https://paragraph.com/@gcake/day-60 ## Content 目錄Part 1: CSS 命名系統Part 2: 重構過程與問題解決Part 1: CSS 命名系統業界常見的 CSS 命名方式1. BEM (Block Element Modifier)核心概念：用「區塊-元素-修飾符」三層結構命名，讓 class 名稱本身就能表達元素的身份和關係。 frontendmentor 命名規則：.block → 獨立元件 .block__element → 元件內的子元素 .block--modifier → 元件的變化版本 實例：

標題

內容

優勢：權重扁平化：所有選擇器權重統一為 0-1-0 zoocha結構清晰：一看 class 名稱就知道元素關係避免樣式衝突：命名空間隔離適用情境：中大型專案需要明確元件邊界團隊協作開發2. OOCSS (Object-Oriented CSS)核心概念：把 CSS 當成「樂高積木」，強調「結構與外觀分離」和「容器與內容分離」。 developer.mozilla 實作方式：/* 通用結構類別 */ .list { /* 列表基礎結構 */ } .list-item { /* 列表項目結構 */ } /* 特定外觀類別 */ .nav-list { /* 導航列表樣式 */ } .nav-item { /* 導航項目樣式 */ } HTML 使用： 適用情境：需要大量重複使用相同視覺模式時（例如 Bootstrap）。 hackmd3. SMACSS (Scalable and Modular Architecture for CSS)核心概念：不是命名規則，而是「CSS 檔案組織架構」，把樣式分成 5 大類： frontendmentorBase (基礎)：全域預設樣式 (body, a, h1)Layout (佈局)：主要版面結構 (.header, .main)Module (模組)：可重複使用的元件 (.nav, .card)State (狀態)：視覺狀態切換 (.is-active, .is-hidden)Theme (主題)：視覺風格變化 (顏色、字型)實作方式：/* base.css */ body { font-family: Arial; } /* layout.css */ .nav { background-color: #f0f0f0; } /* module.css */ .nav-link { padding: 10px; } /* state.css */ .nav-link.is-active { font-weight: bold; } 適用情境：大型專案需要多個 CSS 檔案分工管理時。 developer.mozilla4. SUIT CSS核心概念：專為 React/Vue 等元件化框架 設計，用 PascalCase 命名元件。 frontendmentor 命名規則：ComponentName → .Nav (元件) ComponentName-descendent → .Nav-item (子元素, camelCase) ComponentName--modifier → .Nav--primary (變化版本) ComponentName.is-state → .Nav-link.is-active (狀態) 實作範例： 適用情境：使用 React/Vue 等元件框架，希望 CSS 命名與 JS 元件命名風格一致時。 frontendmentor5. ITCSS (Inverted Triangle CSS)核心概念：用「倒三角形」組織 CSS 層級，從最通用到最具體。 reddit 層級結構：Settings → 變數、配置 Tools → Mixins、函式 Generic → Reset、Normalize Elements → 原生 HTML 標籤 Objects → 佈局模式 (OOCSS 物件) Components → 具體元件 (BEM 命名) Utilities → 工具類別 (!important 覆蓋) 適用情境：超大型專案需要嚴格控制 CSS 優先級 (specificity) 時。 developer.mozilla6. Atomic CSS (原子化 CSS)核心概念：每個 class 只做「一件事」，像寫內聯樣式但用 class。 mastheadtechnology 實作方式：.mt-10 { margin-top: 10px; } .flex { display: flex; } .text-center { text-align: center; } HTML 使用：
...
代表框架：Tailwind CSS、Tachyons。 samsontobiy.hashnode 適用情境：快速原型開發、設計系統統一、不想寫自訂 CSS 時。 mastheadtechnologyCSS 命名方式比較表方法核心目標命名風格學習曲線最適合專案類型BEM元件獨立性block__element--modifier中等中大型傳統網站OOCSS樣式重用性結構+外觀分離中等需要大量重複模式SMACSS檔案組織分類管理中等大型多人協作SUIT CSS元件化框架ComponentName-element中等React/Vue 專案ITCSS層級控制倒三角結構高超大型專案Atomic CSS快速開發單一功能類別高(需記憶大量類別)快速迭代專案BEM 與 Atomic CSS 混用業界經常混用 BEM 和 Atomic CSS（特別是 Tailwind CSS），這種組合能取各自優勢。 sitepoint模式 1: BEM 主體 + Utility 輔助（最常見）核心思想：用 BEM 定義元件結構，用 Atomic 類別處理通用樣式。 reddit

Title

Content

模式 2: Tailwind @apply + BEM 命名核心思想：用 Tailwind 的 @apply 指令，把 utility classes 打包成 BEM 類別。 wearecogworks.card { @apply bg-white rounded-lg shadow-md p-6; } .card__title { @apply text-2xl font-bold mb-4; } .card__btn--primary { @apply bg-blue-500 text-white hover:bg-blue-600; } 優勢：HTML 保持乾淨 wearecogworks保留 BEM 的結構化享受 Tailwind 的快速開發模式 3: Utility-first + BEM 前綴核心思想：主要用 Atomic CSS，只在複雜元件或需要 JavaScript 鉤子時用 BEM。 simplethread

Title

為什麼這樣做：Utility classes 可能會變（從 mt-4 改成 mt-6）BEM 類別是「語意化的 JavaScript 鉤子」，不會因樣式調整而改動 simplethread何時用 BEM？何時用 Atomic CSS？用 BEM 的時機：✅ 元件特有的樣式✅ 需要 JavaScript 操作✅ 複雜的元件變體用 Atomic CSS 的時機：✅ 通用間距、顏色、字體✅ 快速原型、迭代開發✅ 響應式變化CSS 權重計算規則CSS 權重用 ID-CLASS-TYPE 三欄位表示，由左至右比較： developer.mozilla欄位包含的選擇器權重值ID#header1-0-0CLASS.logo、[type="text"]、:hover0-1-0TYPEheader、p、::before0-0-1無權重*、+、>0-0-0比較規則：從左至右逐欄比較，誰的數字大誰贏。 hackmd範例#myId .myClass p { /* 1-1-1 */ color: red; } .myClass .myClass .myClass p { /* 0-3-1 */ color: blue; } 雖然藍色有 3 個 CLASS，但紅色有 1 個 ID，所以紅色贏(ID 欄位 1 > 0)。 developer.mozilla重構前後權重對比元素重構前重構後差異Logo 圖片header .logo img = 0-1-2.header__logo-img = 0-1-0降低 2 個 TYPENav 項目header nav li = 0-0-3.header__nav-item = 0-1-0提高但統一Footer 圖示footer .social-media li img = 0-1-3.footer__social-media-icon = 0-1-0降低 3 個 TYPE核心發現：重構後所有選擇器權重都變成 0-1-0（單一 CLASS）。 cloudfourBEM 權重扁平化的優勢重構前：權重金字塔（容易失控）#header nav li.active (1-1-2) ← 要用很複雜的選擇器 footer .social li (0-1-2) nav li (0-0-2) .button (0-1-0) ← 很難覆蓋上面的樣式 重構後：權重扁平化（完全可控）.header__nav-item--active (0-1-0) .header__nav-item (0-1-0) .footer__social-icon (0-1-0) .hero__title (0-1-0) 優勢：覆蓋樣式只需在 HTML 加 class，不用改 CSS 權重後寫的自動覆蓋前寫的，符合直覺完全避免 !important zoochaPart 2: 重構過程與問題解決專案背景作業目標：練習用 box model 推擠出正確的版面，將傳統 CSS 寫法重構為 BEM 風格。 技術限制：先少用 position 和 float練習 inline-block、text-align、vertical-align不使用 Flexbox/Grid（未來才學）重構前的 HTML/CSS 結構Header 部分（重構前）HTML：
CSS：header { position: relative; border: 5px solid black; background-color: #f2f2f2; } header nav { position: absolute; top: 50%; left: 300px; transform: translateY(-50%); } header .logo img { width: 60px; } 問題：沒有使用 class 命名，權重不一致依賴 position: absolute，寫死 left: 300px權重分散（0-0-1 到 0-1-2 不等）重構後的結構（第一版）改用 BEM 命名HTML：

ZERO TYPE

CSS：.header { border: 5px solid black; background-color: #f2f2f2; } .header__logo-img { width: 100%; height: auto; } .header__nav-item { color: gray; display: inline-block; margin-right: 100px; } 改進：所有選擇器權重統一為 0-1-0移除 position: absolute 依賴命名語意化遇到的問題與解決方案問題 1: Footer 扁平化後無法正確垂直置中症狀：改用扁平化 HTML 後，Footer 社群媒體區塊視覺上偏下。 原因：