こんにちは！
気づけば35歳、未経験からWeb開発の世界に飛び込んだ者です。
ヘッダーの余白を少し直しただけなのに、なぜか遠く離れたフッターが崩壊する。直せば直すほど他の場所が壊れていく。「これ、CSSじゃなくてジェンガかな？」と何度も心が折れかけました。
しかし、ある本を読んでから少しずつ霧が晴れてきました
この記事では、自分でも理解できた内容をベースに、「破綻しないCSS設計の考え方」をお届けします。
參考書籍：
- 谷 拓樹『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』（2014）
本文的讀者對象
- 已經能寫出 CSS 的基本（選擇器與屬性）
- 常為類別命名苦惱，最後還是取了像 box1 這種名字
- 想了解 CSS 設計（BEM / FLOCSS）基礎的人
-
目標：「更好的 CSS」的 4 個目標
良好的 CSS 架構應具備以下 4 個特性。
- 🔮 可預測
遵循規則正常運作，新增的樣式不會對其他地方造成負面影響（例如莫名其妙的版面崩壞）。 - ♻️ 易於重用
以抽象方式撰寫，當出現類似 UI 時，能不靠複製貼上就能重用。 - 🛡 易於維護
即使加入新設計，也不用提心吊膽地去修改既有 CSS。 - 📈 易於擴充
隨著網站規模變大、成員增加，也不會出現「這是我的地盤以外」的問題。
接近這 4 個目標的一個強力方法是「元件設計（Component-based design）」。
-
什麼是元件設計？
元件設計是把 UI 當作「獨立的零件（元件）」來設計的方法。重要的是將功能與行為明確分離，並「盡量不依賴 HTML 結構來撰寫樣式」。
比喻現實生活就是，把「住在父母家、被父母規矩牽制的狀態」變成「獨居、完全自立的狀態」。
❌ 壞範例：依賴 HTML 結構的 CSS（住在父母家）
因為依賴父母（.sidebar）或家裡的結構（ul li），一旦搬家（HTML 結構改變）樣式就會消失。
.sidebar ul li a {
color: #333;
background-color: #eee;
}⭕️ 好範例：作為元件獨立的 CSS（獨居）
類別本身就能發揮功能，不管搬到哪裡（放在哪個位置）都能保持自己的樣式。
.c-nav-link {
color: blue;
}-
【重要】掌握 BEM（命名規則）
為了實現元件設計，業界廣泛使用的類別命名規則是「BEM」。
※ 不是妖怪人間。
BEM 將 UI 分為以下 3 種並依此命名：
| 種類 | 角色 | 連接方式（規則） | 範例 |
|---|---|---|---|
| Block（區塊） | 元件的主要框架 | 無 | .c-card、.c-button |
| Element（元素） | 組成區塊的要素 | 兩個底線（__） | .c-card__title |
| Modifier（修飾） | 區塊或元素的變體 | 兩個連字號（--） | .c-button--danger |
一開始看到 __ 或 -- 可能會想「是顏文字嗎？」但習慣之後會覺得非常合理。
💻 BEM 的實際範例（文章卡片與按鈕）
下面用實際程式碼看看 Block、Element、Modifier 如何被使用。
<!-- 【Block】元件的主要外框 -->
<article class="c-card">
<!-- 【Element】組成要素（用 __ 連接） -->
<h2 class="c-card__title">CSS 設計的基本</h2>
<p class="c-card__text">學會 BEM 後，世界會不一樣。</p>
<!-- 【Block】獨立的按鈕 -->
<button class="c-button">一般按鈕</button>
<!-- 【Modifier】變體（用 -- 連接） -->
<button class="c-button c-button--danger">刪除按鈕</button>
</article>
/* 【Block】基準樣式 */
.c-button {
padding: 10px 20px;
background-color: #eee;
border-radius: 4px;
}
/* 【Modifier】只寫改變的部分（差異） */
.c-button--danger {
background-color: #ff4d4f; /* 用紅色覆寫 */
color: #fff;
}提示：統一命名規則後，僅看 HTML 就能大致猜到某個類別的用途，例如「這是卡片的標題」或「這是一個危險（紅色）按鈕」。
-
用 FLOCSS 把檔案整理得漂亮
若 BEM 是「怎麼命名」的規則，FLOCSS（フロックス）就是「住在哪裡（檔案如何分類、放置）」的規則。
FLOCSS 將 CSS 主要分成以下幾個層級來管理：
- Foundation（基底）
重置瀏覽器預設樣式的 CSS、整體背景色等。像是建築的基礎工程。 - Layout（版面）
決定頁首、頁尾、側邊欄等頁面大框架的元素。像是建築的骨架。 - Object（物件）
以 BEM 命名的、可重用的元件群（按鈕、卡片等）。像是建築裡的家具。
把 BEM（名字）和 FLOCSS（住址）結合起來，就能建立「名字不衝突」「一眼就知道東西寫在哪裡」的 CSS 環境。
-
不要急著優化的「三次法則」
到目前為止我一直在強調元件化的重要性，但最後要跟你分享一個心法：不要一開始就想把元件做得能應用於所有場合。
程式設計有一個叫做「三次法則（Rule of Three）」的想法：
- 第一次：當某個 UI 第一次出現時，寫出它，不用考慮重用。
- 第二次：即使出現類似 UI，也先忍住不要急著元件化（鍛鍊耐心）。
- 第三次：到第三次出現時，確定這是個共通模式，再進行重構（整理成元件）。
範例說明：
- /* 第一次、第二次各自在不同地方直接寫 */
- .top-page-btn { ... }
- .about-page-btn { ... }
+ /* 第三次出現時統一化，改用 BEM 做成元件 */
+ .c-button { ... }總結
- 「可預測、可重用、易維護、易擴充」是「更好的 CSS」的特徵
- 元件要獨立，不依賴父容器，做到「獨居（獨立）」的狀態
- BEM 是「命名方式」，FLOCSS 是「放檔案的位置」
- 不必一開始就追求完美，遵循「三次法則」再做重構
了解 CSS 設計能大幅降低日常切版的壓力。從未經驗者踏入這個領域時要學的東西很多，但只要理解每一項技術「為什麼需要」，就會穩健成長。
為了減少「改了 CSS 卻導致無關地方崩壞！」的痛苦夜晚，下一次寫樣式時請試著把 BEM 加進你的流程吧！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
