CSS 入門全攻略：從基本語法到響應式設計的實戰教學
CSS（Cascading Style Sheets，層疊樣式表）是控制網頁外觀的語言，負責字體、顏色、間距與版面配置；只要做網站就躲不掉它。CSS 真正難的從來不是背屬性，而是結…
CSS（Cascading Style Sheets，層疊樣式表）是控制網頁外觀的語言，負責字體、顏色、間距與版面配置；只要做網站就躲不掉它。CSS 真正難的從來不是背屬性，而是結構，把三件事拆開看懂就通了：選擇器決定「改誰」、權重決定「誰贏」、盒模型決定「佔多少空間」。Google 自 2018 年起全面採用行動裝置優先索引（Mobile-First Indexing），手機版排版品質直接影響桌機版排名 [來源：〈Mobile-first indexing report〉〈https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-first-indexing〉〈2024〉]，這也是 CSS 不只是美觀、更牽動搜尋表現的原因。
重點先看：CSS 難在結構不在語法，先搞懂選擇器、權重、盒模型三件事就能獨立調版面；Google 行動裝置優先索引讓手機版 CSS 直接影響排名 [來源：〈Mobile-first indexing report〉〈https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-first-indexing〉〈2024〉]。
CSS 是什麼？做網站為什麼一定要碰到它
CSS 是控制網頁「長相」的語言，負責字體、顏色、間距、版面配置這些視覺呈現。HTML 給頁面結構，CSS 給頁面樣式，JavaScript 給頁面行為，三者分工清楚，所以只要你做網站，不管是自己刻版、改模板，還是跟設計師合作，至少都要懂一點 CSS。它最核心的任務，是把「內容」與「呈現」分離，所以一份樣式能套到全站數十個頁面、改一個檔案就全站同步。
就算不是工程師，也一定會撞上畫面問題。文字太小、排版太擠、手機版跑掉、按鈕歪一邊，這些狀況懂 CSS 才知道從哪調，否則只能在 WordPress 後台或主題設定裡一直試錯，試到心力交瘁還找不到原因。如果對自己刻樣式沒興趣，把結構、技術、設計一次做好交給 品牌官網設計 團隊，通常比硬碰硬更有效率。
真正的門檻在這裡：屬性多從來不是問題，難的是要同時把版面、間距、層次、跨裝置呈現一次處理好。很多人背了一堆 color、font-size，遇到版面亂還是束手無策，因為缺的是判斷框架，不是屬性清單。這也是 網頁設計從零到一 能不能走穩的關鍵分水嶺。
用一張表把三層分工釘死，之後跟設計師、工程師溝通就能一句話對齊認知，不用再雞同鴨講。
| 語言 | 負責 | 對應到畫面的什麼 | 舉例 |
|---|---|---|---|
| HTML | 結構 | 這是一段文字、這是一張圖片 | <p>、<img>、<h1> |
| CSS | 樣式 | 文字變紅、圖片靠右、按鈕變圓角 | color、font-size、display |
| JavaScript | 行為 | 點按鈕跳出視窗、表單送出 | 事件監聽、DOM 操作 |
會把 CSS 學歪的人，多半是把它當「屬性字典」在背。其實屬性查得到就好，框架才是要內化的東西。如果連網站的底層觀念都還不熟，建議先搞懂 HTTP 與 HTTPS、SSL 憑證 這些基礎，再回來看 CSS 會順很多。
再補一個觀念落差：CSS 不是程式語言，它是宣告式語言。你寫的不是「先做 A 再做 B」的步驟，而是一連串「在什麼條件下、要把誰變成什麼樣」的宣告，瀏覽器再依規則把這些宣告套到對應的元素。理解這點，你就會明白為什麼 CSS 沒有傳統意義的迴圈與變數（直到 CSS 自訂屬性出現），也會明白為什麼同一段樣式在不同瀏覽器、不同載入順序下結果可能不同。宣告會彼此疊加、覆蓋、協調，這個「疊加」正是 Cascading 那個 C 的本意。
對做內容或做品牌的人來說，CSS 還有一層現實意義：手機螢幕已經是全球上網的主流入口，手機裝置（不含平板）在 2026 年第一季佔全球網站流量的 52.27% [來源：〈Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。多數訪客從手機進站，手機版排版的每一個留白、字級、按鈕大小，都會直接決定他們停留多久、會不會往下滑、會不會點擊。CSS 在這個情境下，等於是轉換漏斗的第一道閘門。
CSS 語法長怎樣：選擇器、屬性、屬性值的三段結構
一段 CSS 永遠是三段式：先寫選擇器指定「改誰」，再在大括號裡用「屬性: 屬性值;」宣告「改成什麼樣子」。例如 h1 { color: red; } 就是把所有 h1 標題變紅色。掌握這個三段結構，後面看到任何 CSS 碼都不會陌生，因為再複雜的樣式都拆得出這三層。
選擇器是指定樣式要套在誰身上的開關，沒有它瀏覽器根本不知道改誰。新手只要認得下面三種，就能應付大多數情況。class 和 id 的符號差一個字，寫錯整段就沒作用，這也是 網頁設計必備元素 之外最常踩到的除錯地雷。
- 元素標籤選擇器：直接寫 HTML 標籤名，像 p、h1，會一次套到全站所有同類標籤，適合設定基礎樣式。
- Class 選擇器：用半形點開頭，像.btn、.title，可重複使用，是實務上最常用的選擇器。
- ID 選擇器：用半形 # 開頭，像 #header，具唯一性，一個頁面通常只用一次，適合主區塊。
宣告的格式是硬規則，不是建議。屬性和值中間是冒號，結尾是分號，整組包在大括號裡。漏掉分號、括號沒成對，是 CSS 整段失效的最常見原因，沒有之一。這聽起來很 basic，但實際除錯時，多半是死在這種小地方。
- 屬性與值之間用冒號：color: red
- 每組宣告結尾加分號：color: red;
- 所有宣告包在大括號：h1 { color: red; }
- 用逗號可一次選多個：h1, h2, p { color: #333; }
很多新手卡關跟觀念無關，純粹是拼錯字。color 少一個 l、font-size 寫成 fontsize，瀏覽器直接無聲忽略，你還以為是權重問題在那邊查半天。這時候 Figma 養成的命名習慣幫不上忙，要用編輯器的自動補全來防呆，後面章節會講。
除錯的第一個動作，永遠是打開 Chrome DevTools（按 F12）檢查那個元素。被劃上刪除線的規則，就是被覆蓋掉的，能立刻看出是權重問題還是名稱寫錯。這個動作比你看十篇教學都管用，因為它直接把瀏覽器的判斷邏輯攤開給你看。
選擇器還能組合，這是新手進到實務後會大量用到的能力。常見的組合方式有四種：後代選擇器（用空格連接，選某容器內所有符合的元素，例如 .nav a 會選到導覽列裡所有連結）、子代選擇器（用 > 連接，只選直接子層，不選孫層）、群組選擇器（用逗號把多個選擇器合併，共用一段宣告）、偽類選擇器（用冒號，例如 :hover 控制滑鼠移上去的狀態）。這四種組合讓你不用動 HTML，就能精準指定要改的元素。
| 組合類型 | 符號 | 範例 | 選到的對象 |
|---|---|---|---|
| 後代選擇器 | 空格 | .card p | 卡片內所有段落（含孫層） |
| 子代選擇器 | > | .card > p | 卡片的直接子層段落 |
| 群組選擇器 | 逗號 | h1, h2, h3 | 三種標題共用同一段樣式 |
| 偽類選擇器 | 冒號 | a:hover | 連結被滑鼠移上去時 |
CSS 要寫在哪裡？外部、內部、行內三種放法的取捨
CSS 有三種放法：外部樣式表（獨立.css 檔，用 link 引入，正式網站唯一推薦）、內部樣式表（寫在該頁 <style>，標籤，僅限單頁特殊需求）、行內樣式（style 屬性直接寫在標籤上，權重過高又難維護，盡量別用）。三者的差別不只是寫法，更直接影響後續維護、擴充與團隊協作。
外部樣式表之所以是唯一推薦，是因為它同時解掉了結構、維護與效能三件事。結構上，HTML 與樣式分離最乾淨，改外觀不必碰內容；維護上，改一個檔案就能同步全站數十個頁面，不用逐頁翻找；效能上，獨立檔案會被瀏覽器快取，使用者切換頁面時不必重複下載，能明顯縮短開啟時間，這對 網站速度優化 和 SEO 都是正向。想知道快取怎麼運作，可以看 快取加速設定 的完整說明。
| 放法 | 位置 | 維護性 | 權重 | 適用情境 |
|---|---|---|---|---|
| 外部樣式表 | 獨立.css 檔，link 引入 | 最高，改一處全站同步 | 正常 | 正式網站、長期維護專案 |
| 內部樣式表 | 該頁 <style> 標籤 | 中等，僅限單頁 | 正常 | 單一到達頁、活動頁 |
| 行內樣式 | 標籤上的 style 屬性 | 最低，散落難管理 | 過高，會蓋過外部 | 快速測試、JS 動態調整 |
內部樣式表能用，但前提是搞清楚它的定位。只有在「這頁才用、其他頁不會重複」時才合理，例如單一到達頁或活動頁的臨時樣式。如果你是做 一頁式網頁 或臨時活動頁，內部樣式表會比硬開一個 css 檔方便。但一旦這個樣式會在第二個頁面出現，就該抽到外部，否則日後改一個顏色要翻十個檔案。
行內樣式是最危險的。它權重過高，會強行蓋過外部樣式表的設定，大量使用會讓後續維護極度痛苦。接手別人專案時，看到整頁都是 style="" 的程式碼通常代表前面缺乏紀律。正式專案裡，行內樣式只留給動態調整或快速測試，絕不能當主要寫法。
選擇準則一句話：能用外部就用外部，維護成本與擴充彈性遠勝其餘兩種放法，這也是團隊協作的共通前提。如果你用 WordPress 架站，主題的 style.css 就是標準的外部樣式表實踐；用 Elementor 或 Bricks Builder 這類視覺編輯器，底層也是把樣式收進外部檔案，只是幫你把寫碼這步藏起來。
載入順序也是新手容易忽略的環節。瀏覽器是由上而下讀 HTML，遇到外部 CSS 的 link 標籤時會去下載該檔案，再把樣式套進來。當兩份樣式表權重相同，後載入的會覆蓋先載入的。這也是為什麼把自訂樣式放在主題樣式之後引入，是讓覆蓋生效的基本功；放錯順序，權重明明夠卻改不動，這種狀況在 WordPress 子主題（child theme）裡特別常見。
CSS 寫了卻沒生效的兩個根源
新手 CSS 不生效，九成出在兩件事：一是「權重」，別處的樣式優先級比你高，把你的規則蓋掉了；二是「盒模型」，你算錯了元素實際佔的空間。把這兩個觀念搞懂，後面調版面就不再靠運氣。屬性背再多，少了這兩個判斷框架，遇到版面亂還是會卡住。
權重（Specificity）就是當多條規則同時套到同一個元素時，瀏覽器判斷誰贏的優先順序。CSS 規範把權重分成明確的層級 [來源：〈Specificity〉〈https://developer.mozilla.org/docs/Web/CSS/Specificity〉〈2024〉]，由高到低是：!important > 行內樣式 > ID 選擇器 > Class 選擇器 > 元素標籤。前面用高權重，後面想用一般選擇器去覆蓋，常常就改不動。
| 權重層級 | 範例 | 相對強度 |
|---|---|---|
| !important | color: red !important | 最高，最後手段 |
| 行內樣式 | <p style="color:red"> | 極高，難覆蓋 |
| ID 選擇器 | #header | 高 |
| Class 選擇器 | .btn | 中 |
| 元素標籤 | p、h1 | 最低 |
權重其實可以算成一組數字（A, B, C, D），只是多數情況下記住「ID 贏 Class、Class 贏標籤、行內贏一切、!important 壓過全部」就夠用了。舉個具體例子：選擇器 #header .title 同時用了一個 ID 和一個 Class，它的權重會高過單純寫 .title 的規則，所以就算你把 .title 寫在檔案後面也贏不了。實務上的解法很簡單：把要覆蓋的選擇器寫得跟對方一樣具體（對方用 #header .title，你就也用 #header .title），靠載入順序取勝，避免靠 !important 硬壓。
權重相同時走「就近原則」，後寫的覆蓋先寫的。這就是為什麼同一個選擇器寫兩次，贏的常常是後面那段，不是你寫錯，是瀏覽器的規則就長這樣。實務上要避免權重打架，最乾淨的做法是盡量只用 class，少用 id，更別碰 !important。
!important 是最後手段，能不用就不用。一旦習慣靠它覆蓋，整份 CSS 很快會陷入權重軍備競賽，到最後每一行都要加 !important 才有效，檔案就沒救了。判斷原則是：只要想按 !important，先懷疑選擇器結構出了問題，別急著靠加權重取勝。
以這類用 WordPress 主題或視覺編輯器架的內容站為例，常見的狀況是站長在自訂 CSS 面板改了按鈕顏色，畫面卻停在原樣。依這類站的典型表現，問題出在權重或載入順序的約佔七成上下，選擇器拼錯或符號寫錯的約兩成，真正需要動到 HTML 結構的反而偏少。典型排查路徑是先按 F12 開 DevTools 看該按鈕，若自訂規則整段被劃上刪除線，多半是主題或編輯器用了更高權重的選擇器，這時建議把選擇器寫得跟對方一樣具體、再靠載入順序取勝。要特別留意一個失敗情境：當主題更新或快取外掛清快取後，先前能覆蓋的規則可能突然失效，因為載入順序被改動了，這類間歇性問題最容易被誤判成「CSS 壞掉」。實務上的判斷重點是，若覆蓋成功一陣子後又失效，先回頭查載入順序與快取，別急著改屬性。
盒模型是另一個關鍵。在瀏覽器眼裡，每個元素都是一個方框，由內而外四層：Content（內容）→ Padding（內距，自己裡面的留白）→ Border（邊框）→ Margin（外距，和別人的距離）。你設定的寬度高度，常常只是 Content 的尺寸，加上 padding、border 後實際佔的空間會比你以為的大，這就是版面會亂推、會爆框的根源。
新手最常搞混的就是 padding 和 margin。覺得畫面擠，多半該加大的是外距 margin，不是一直墊內距 padding。padding 是元素自己裡面的空間，像按鈕裡的字要不要貼邊；margin 是元素跟別人之間的距離，像兩個區塊要不要黏在一起。這兩個搞錯，再怎麼調都調不出你要的留白。把觀念補齊可以搭配 CSS 盒模型完整圖解，會比死記快很多。
盒模型最實用的進階設定是 box-sizing。預設的 content-box 模式下，你寫 width: 300px 指的只是 Content 寬度，加上 padding 和 border 後實際寬度會超過 300px，這是新手排版爆框的主因。把 box-sizing 設成 border-box 之後，width: 300px 就會把 padding 與 border 一起算進 300px 裡，元素實際佔的總寬就是你設的數字，排版預測性大幅提升。多數現代專案會在樣式表開頭對所有元素套用 *, *::before, *::after { box-sizing: border-box; }，就是為了一勞永逸解決這個算術問題。border-box 該設為預設值，已經是業界共識。
margin 還有一個常讓新手困惑的現象叫「邊界重疊」。當兩個垂直相鄰的區塊都設了 margin，瀏覽器不會把兩者相加，而是取較大的那個當作兩者之間的間距。例如上面的區塊 margin-bottom: 40px、下面的區塊 margin-top: 20px，兩者之間的距離是 40px 而非 60px。這個行為只發生在垂直方向的區塊元素之間，水平方向不會。遇到這種「間距怎麼調都對不上」的狀況，記得把邊界重疊列入懷疑清單，用 padding 或 flex、grid 的 gap 屬性替代就能避開。
新手最常用的 CSS 屬性
新手不用急著背一堆屬性，先把四類學起來就做得出基礎版面：文字樣式（color、font-size、text-align）、背景與邊框（background-color、border-radius）、區塊尺寸（width、height）、排版方式（display，特別是 flex）。屬性查得到就好，重點是知道什麼情境該找哪一類，這比死背清單有用太多。
| 分類 | 常用屬性 | 作用 | 新手注意 |
|---|---|---|---|
| 文字樣式 | color、font-size、text-align | 顏色、字級、對齊 | 字級用 px 或 rem，做出層級 |
| 背景邊框 | background-color、border-radius | 背景色、圓角 | 別用純黑，深灰更有層次 |
| 區塊尺寸 | width、height | 寬度、高度 | 高度別寫死，內容變多會爆 |
| 排版方式 | display（block、inline、flex） | 顯示模式 | flex 是現代排版主力 |
顏色可用名稱（red）、十六進位碼（#333333）或 RGB 值。網站通常不用純黑 #000，適度用深灰或品牌色比較有層次感。很多設計稿看起來舒服，差別常常就在配色這一層，不是版型。配色要系統化，可參考 色彩學對比與互補，最後再對照 網站色彩計畫 收斂。
字級建議用 px 或 rem，並讓主標題、內文、註解小字有明顯層級區分，這會直接影響手機版閱讀體驗。text-align 常見有 left、center、right，內文多半靠左，標題或按鈕可能置中。字體本身怎麼挑，可看 中文字體挑選 與 英文字體推薦，排版細節再對照 字體與行距技巧。
行高（line-height）是新手常忽略、卻對閱讀體驗影響極大的屬性。內文行高設在 1.5 到 1.8 之間，段落看起來才不會擠成一團；標題行高可以縮到 1.2 左右，讓標題顯得結實有力。行高用無單位的數字（像 line-height: 1.6）比用 px 彈性更好，因為它會根據字級自動按比例縮放，手機版不會出現字變小、行距卻沒跟著縮的尷尬狀況。
border-radius: 8px 這種小圓角能讓按鈕、卡片視覺更柔和，是現代網站風格的基本動作。搭配 CTA 行動呼籲按鈕設計 一起想，按鈕的圓角、底色、留白會直接影響點擊率，這不是裝飾，是轉換。
display 決定元素怎麼被排版，是最該花時間搞懂的屬性之一。block 獨佔一行（像 div、p），inline 不換行只佔必要寬度（像 span、a），inline-block 則介於兩者之間、不換行又能設寬高，flex 是現代一維排版主力，父層設 display: flex 後子元素能輕鬆置中、平均分配空間。width 與 height 可設尺寸，但高度盡量別寫死，否則內容一變多版面就出問題。
屬性表只是地圖，不是目的地。很多人卡在屬性背得很熟，卻做不出像樣的版面，因為缺的是把屬性組合成排版邏輯的能力。這部分會在 RWD 與維護兩節繼續拆。如果想往進階走，SASS SCSS 預處理器 能幫你把重複樣式變數化，是下一步。
Flexbox 排版速記：四個屬性就能對齊大半版面
Flexbox 是新手一定要熟練的排版工具，因為現代網站九成以上的水平排列、置中、等距分佈，都是靠它完成的。它的設計邏輯很乾脆：父層設 display: flex 變成 flex 容器，子元素自動變成 flex items，接著你只要在父層控制「主軸方向」與「對齊方式」，子元素就會乖乖排好。記住下面四個父層屬性，多數版面需求就涵蓋了。
| 屬性 | 常見值 | 作用 |
|---|---|---|
| flex-direction | row、column | 決定主軸是水平還是垂直 |
| justify-content | center、space-between、space-around | 主軸方向的對齊與分佈 |
| align-items | center、stretch、flex-start | 交錯軸方向的對齊 |
| gap | 16px、1rem | 子元素之間的間距，省去逐個設 margin |
常見的應用情境很好對應。要把一個元素水平置中，父層設 justify-content: center 就解決；要讓導覽列的選單項目平均散開、兩端貼齊，用 justify-content: space-between；要讓卡片裡的圖片與文字垂直置中對齊，設 align-items: center。gap 則是現代寫法，直接在父層一次設定所有子元素的間距，比起過去幫每個子元素逐一設 margin 然後處理邊界重疊，乾淨太多。要讓子元素裝不下時自動換列，父層加 flex-wrap: wrap 即可。Flexbox 的心智模型就是「父層掌方向與對齊、子層聯合變化」，抓住這個分工，遇到版面問題就能反推出該調哪個屬性。
Flexbox 最常見的踩坑點是忘了它「只管一個方向」。flex-direction 設成 row 時，justify-content 控制的是水平的左右分佈，align-items 控制的是垂直的上下對齊；一旦把 flex-direction 改成 column，兩者的方向會跟著對調。很多人改了方向卻沒同步調整對齊屬性，畫面就整個錯位，還以為是權重或 display 沒生效。除錯時先確認 flex-direction，再檢查對齊屬性對應的方向，能少走很多冤枉路。
用 CSS 做 RWD 響應式設計：media query 與相對單位
RWD 靠兩個工具完成：media query 偵測螢幕寬度並切換樣式（如 @media screen and (max-width，768px)），再搭配 rem、vw、vh 等相對單位讓元件等比例縮放。兩者結合，同一份 HTML 才能在手機、平板、桌機都好看，這也是 RWD 響應式網頁設計 的核心。
為什麼 RWD 那麼重要？因為 Google 自 2018 年起採用行動裝置優先索引（Mobile-First Indexing）作為預設機制，主要根據手機版網站的內容與體驗來決定排名 [來源：〈Mobile-first indexing report〉〈https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-first-indexing〉〈2024〉]。手機版體驗差，桌機版排名也會被拖累，所以 RWD 不只是 UX 問題，更是 SEO 問題。沒人喜歡在手機上兩指縮放、左右滑動找按鈕，那種體驗只會讓人秒退。
手機流量的份量也讓 RWD 變得無可迴避。手機裝置（不含平板）在 2026 年第一季佔全球網站流量 52.27%，已經過半 [來源：〈Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。當超過半數的訪客從手機進站，手機版排版就不是可有可無的附屬品，而是主戰場。再加上 Google 在 2020 年宣布把 Core Web Vitals 納入網頁體驗排名訊號，手機版的載入穩定度與互動流暢度也直接進了排名公式 [來源：〈Google Search Central Blog〉〈https://developers.google.com/search/blog/2020/05/evaluating-page-experience〉〈2020-05-28〉]。排版好不好看是 UX，排得好不好被 Google 評分是 SEO，兩者背後都是同一份 CSS。
主流斷點沒有絕對標準，但實務上多數網站會以 768px 作為手機與平板的分界，這是業界慣例而非硬性規定。真正要盯的不是數字，是版面在切換那一刻會不會擠成一團、按鈕會不會點不到。這組分法是常見的起點，你可以根據自己的內容調整。
| 裝置 | 寬度範圍 | 常見調整 |
|---|---|---|
| 手機 | 767px 以下 | 多欄改單欄、縮字體、放大按鈕 |
| 平板 | 768–1023px | 欄數減半、間距收緊 |
| 桌機 | 1024px 以上 | 多欄並排、完整留白 |
media query 最常見的寫法，是用 max-width 設條件。例如 @media screen and (max-width: 768px) {.container { width: 100%; } }，告訴瀏覽器當寬度小於等於 768px 時，把 container 改成撐滿寬度。這種寫法很常用在手機版調整，例如讓多欄改單欄、縮小字體、增加按鈕可點擊範圍。AWD 與 RWD 的差異，可以對照 AWD 自適應與 RWD 差異 再決定適合哪種。
光靠 px 寫死，元件無法隨螢幕縮放，RWD 要真正有彈性就得用相對單位。rem 對應根元素字級，適合控制字級與間距，整體比例容易統一；vw 與 vh 分別是視窗寬與高的 1%，100vw 就是撐滿整個螢幕寬度，適合滿版區塊與首屏 Banner。換句話說，px 適合需要精確控制的細節，相對單位適合需要等比例縮放的整體結構。
- rem：相對於根元素字級，適合字級與間距，整份樣式比例統一。
- vw：視窗寬度的 1%，100vw 撐滿螢幕寬，適合滿版區塊。
- vh：視窗高度的 1%，100vh 撐滿螢幕高，適合首屏 Banner。
- %：相對於父元素寬度，常用於側欄與欄位配置。
斷點的設定策略也值得花點心思。新手常犯的錯是「先決定數字再寫樣式」，硬把 768px、1024px 套上去。比較穩的做法是反過來：先把桌機版排好，再用瀏覽器的裝置模擬器把寬度慢慢往中間拉，觀察畫面在哪個寬度開始擠、開始破版，那個寬度就是你該設的斷點。這種「以內容為依歸」的設斷點方式，比套用固定數字更能照顧實際閱讀體驗，也避免設了一堆斷點卻沒實際作用的虛工。
行動裝置優先（mobile-first）是另一個值得內化的寫法習慣。它的核心是先寫手機版樣式當預設值，再用 min-width 的 media query 往上加桌機版調整。這樣寫的好處是手機版載入的 CSS 量最少、最乾淨，不會把一堆桌機專用的覆蓋規則也送到手機上拖慢渲染。雖然一開始要適應「由小到大」的思考方式，但對效能與可維護性都是正向。
把 RWD 做好，連帶會影響跳出率與停留時間，這兩個都是 SEO 的正向訊號，可參考 跳出率與 SEO 關係。如果網站是購物型，RWD 購物網站設計 有更針對性的做法；用主題工具的人，也常需要補一點 media query 觀念才能完全掌控手機版。
怎麼讓 CSS 乾淨好維護
網站一放大，CSS 的可維護性就比寫得多快更重要。能立刻上手的做法落在三條線上：用註解把樣式表分區、撰寫順序比照網頁結構由外到內、把重複樣式抽成通用類別集中管理。三者的共同目的，是讓半年後的自己或接手的人，不必從頭讀完就能找到想改的那一段。
註解分區是成本最低、回報最高的一招。寫成 /* 導覽列樣式 */、/* 手機版專用 */ 這樣的標記，配合 Ctrl+F 搜尋能快速定位，不容易改到不該改的地方。CSS 一旦變多，沒分區真的會找不到位置，每次找一個樣式都像在翻雜物堆。
撰寫順序比照網頁結構，先 header、再 main、再 footer，由外層容器走到內部元件，這樣看程式碼時腦中才對應得到畫面。這跟 網頁版面設計、SEO 友善結構 的思維一致，由外而內、由大到小。
模組化是三者裡影響最深遠的。把按鈕、卡片、表單當成可重用元件整理成通用類別（例如將相同底色、圓角、字級的按鈕收進 .btn-main），改一處全站同步，版面也更一致。重複代碼越多，CSS 檔案也越肥，集中管理既是維護也是效能優化。想把版面設計做紮實，可參考 網頁排版範例 與 Bento Grid 排版。
工具方面，VS Code 的 IntelliSense 提供屬性自動補全與參數提示，輸入 col 就會跳出 color，對容易拼錯屬性名的 CSS 特別有用，能直接消滅一半的除錯時間。Chrome DevTools 能即時檢查元素套用了哪些規則，在瀏覽器裡直接改樣式預覽，是排版跑掉時最快的排查工具。這兩個工具都是免費的，沒理由不用。
命名紀律是可維護性裡最被低估的一塊。class 名稱建議描述「它是什麼」或「它在哪裡」，而不是「它長怎樣」。例如 .btn-primary、.card-title 這種語意化命名，即使日後配色從藍改紅，名稱依然合理；相對地，把按鈕命名成 .blue-button，改色時就會出現「紅色的 blue-button」這種名實不符的尷尬。命名跟著語意走，樣式變動時不用連改名，這是長期維護省力的關鍵。
CSS 寫得好不好，衡量的標準其實是接手的人能不能快速看懂。如果你常協作，建議把 常見設計錯誤 與 品牌網站設計建議 讀過一遍，很多坑前人都踩過。想往進階排版走，UI 原型設計 與 網頁設計趨勢 能幫你把設計判斷磨得更細。
CSS 可維護性自檢表
把上面的習慣整理成一份可以逐條打勾的檢查表，交付前或接手別人專案時走一遍，能快速看出這份 CSS 健不健康。每一條對應的都是前面講過的觀念，這裡只是把它們變成可操作的判斷點。
- 樣式表開頭是否對所有元素套用 box-sizing: border-box。
- 是否用註解分區，能用搜尋快速定位各區塊。
- 撰寫順序是否由外層容器到內部元件，對應畫面結構。
- 重複樣式是否抽成通用類別，而非散落各處複製貼上。
- class 命名是否描述語意，而非描述外觀顏色。
- 是否盡量只用 class，少用 id 與 !important。
- 行內樣式是否只留給動態調整或測試，沒有散落正式版面。
- 斷點是否根據實際破版寬度設定，而非套用固定數字。
這份檢查表的判讀方式很直觀：打勾越多，這份 CSS 越健康、越容易維護；漏勾的項目，就是接下來該優先補強的地方。它也可以當作跟設計師、工程師交接時的共通語言，把抽象的「寫得好不好」變成可量化的條目，減少各說各話的空間。
CSS 常見問題：沒生效、Flexbox vs Grid、檔案大小
三個新手高頻問題一次答：寫了沒生效就按 F12 看是否被刪除線覆蓋（多半是權重或引入路徑問題）；先學 Flexbox 再學 Grid（Flex 處理一維對齊、能應付絕大多數版面需求）；CSS 檔案本身通常很小，真正拖慢速度的是冗餘重複代碼，集中管理就是最簡單的優化。
CSS 沒生效的三大原因：第一，選擇器名稱寫錯，例如 HTML 是 class 卻用了 id 符號；第二，忘記在 HTML 引入 CSS 檔案，或路徑寫錯；第三，權重被更強的規則覆蓋。排查的標準動作就是按 F12 檢查元素，看樣式是否被劃上刪除線，被劃掉就是被蓋掉了。這個流程比你看再多教學都直接，因為它把瀏覽器的判斷攤開給你看。
| 沒生效原因 | 怎麼判斷 | 解法 |
|---|---|---|
| 選擇器寫錯 | DevTools 找不到該規則 | 核對 class/id 符號 |
| 沒引入 CSS 檔 | DevTools 完全沒樣式 | 檢查 link 路徑 |
| 權重被覆蓋 | 規則被劃上刪除線 | 提升選擇器或移除衝突 |
這裡提供一個除錯的標準流程，照著走能省下大量試錯時間。第一步先按 F12 開 DevTools，點選那個沒反應的元素；第二步看右側 Styles 面板，確認你寫的規則有沒有出現；完全沒出現代表選擇器沒選到，去核對 class、id 符號與大小寫；有出現但被劃刪除線，代表被更高權重蓋掉，把選擇器寫得更具體來覆蓋；有出現、也沒被劃掉，但畫面還是不對，那就往盒模型方向查，多半是 padding、margin 或 box-sizing 算錯。這個流程把最常見的三類問題都覆蓋了。
Flexbox 與 Grid 怎麼選？Flexbox 是目前最主流、支援度最高的一維排版方式，先掌握它就能應付絕大多數版面需求，主流前端開發把它當一維排版首選。等對一維對齊夠熟，再進階學 CSS Grid 處理二維佈局，會比一開始就兩個一起學更有效率。簡單說：一排橫的或一排直的用 Flex，要做成表格狀的行列就用 Grid。
| 排版需求 | 適合工具 | 理由 |
|---|---|---|
| 一排按鈕水平置中 | Flexbox | 一維對齊，justify-content 即可 |
| 導覽列兩端貼齊 | Flexbox | space-between 一行解決 |
| 卡片畫廊整齊行列 | Grid | 二維行列結構，Grid 更直覺 |
| 雜誌式多欄長文 | Grid | 需要同時控制列與欄 |
| 單一區塊內垂直置中 | Flexbox | 父層一行設定搞定 |
至於 CSS 寫太多會不會拖慢網站？要分兩層看。CSS 檔案本身的體積遠小於圖片，正常情況對載入速度影響有限。但冗餘、重複的代碼會增加瀏覽器渲染負擔，頁面一多就會有感。模組化集中管理既是維護手段，也是最簡單的效能優化。想再往下挖，可看 Core Web Vitals、Lazy Loading、CDN 加速原理、圖片壓縮工具，這些才是真正影響速度的大宗。
渲染效能還有兩個新手該知道的概念。第一是「關鍵 CSS」，也就是頁面首屏（打開後第一眼看到的那塊）需要的樣式，把這段樣式內嵌到 HTML 裡直接送到瀏覽器，能讓首屏更快畫出來，其餘樣式再背景載入。第二是「避免強制同步佈局」（forced reflow），頻繁用 JavaScript 讀取元素寬高再改樣式，會逼瀏覽器不斷重新計算版面，造成卡頓。這兩個概念做電商或大型站點時特別有感，對一般品牌站可以先記住方向，等流量與頁面數量起來再深入優化。
如果是接案或自己做品牌站，CSS 的乾淨度會直接反映在交付品質上。把 網頁設計費用行情 與 Sitemap 規劃 一起想清楚，CSS 才不會寫到後面變成技術債。架站方式本身也會影響你能掌控多少 CSS，可對照 架站方式比較 再決定；圖片、字體、Icon 這些素材最後都得靠 CSS 接起來，接得穩不穩，打開手機版就知道。
FAQ 常見問題
為什麼我寫了 CSS，畫面卻完全沒變？
最常見三個原因：選擇器名稱寫錯（class 卻用了 id 符號）、忘記在 HTML 引入 CSS 檔、或權重被更強的規則蓋掉。按 F12 開 DevTools 檢查元素，若你寫的規則完全沒出現在 Styles 面板，代表選擇器沒選到或檔案沒引入；若出現卻被劃上刪除線，就是被更高權重蓋掉，把選擇器寫得跟對方一樣具體再靠載入順序取勝。
覆蓋成功的 CSS 規則為什麼過一陣子又失效？
這通常是載入順序被改動，不是 CSS 真的壞掉。主題更新或快取外掛清快取後，樣式表的引入順序可能重組，先前能覆蓋的規則就被擠到前面而失效。排查重點是先回頭查載入順序與快取狀態，先別急著改屬性或加 !important。
CSS 權重是什麼？!important 什麼時候才該用？
權重是瀏覽器判斷多條規則誰贏的優先順序，由高到低為 !important、行內樣式、ID、Class、元素標籤 [來源：〈Specificity〉〈https://developer.mozilla.org/docs/Web/CSS/Specificity〉〈2024〉]。!important 是最後手段，能不用就不用，否則會陷入權重軍備競賽；想加之前先檢查選擇器結構是否出問題。
新手應該先學 Flexbox 還是 CSS Grid？
先學 Flexbox。它是一維排版主力，支援度高、直覺，能應付絕大多數版面。等一維對齊夠熟，再學 CSS Grid 處理二維行列佈局，順序對了學習曲線會平緩很多。簡單判斷：一排橫的或一排直的用 Flex，要做表格狀的行列就用 Grid。
rem、vw、vh 和 px 差在哪？
px 是固定像素，精確但無法隨螢幕縮放；rem 相對於根元素字級，適合字級與間距，整份樣式比例統一；vw、vh 分別是視窗寬與高的 1%，適合滿版區塊與首屏。RWD 要有彈性，字級與間距交給 rem，滿版結構交給 vw、vh，px 留給需要精確控制的細節。
box-sizing 該設成什麼？為什麼排版前都要先設？
建議設成 border-box。預設的 content-box 會把 padding 與 border 額外加在 width 之外，導致元素實際佔的空間比你想的大、版面爆框。設成 border-box 後，width 會把 padding 與 border 一起算進去，總寬度就是你寫的數字，排版可預測性大幅提升。多數專案會在樣式表開頭用 *, *::before, *::after { box-sizing: border-box; } 一次套用，作為排版前的標準起手式。
落到實作上就三件事：選擇器決定改誰、權重決定誰贏、盒模型決定佔多少空間。下次版面跑掉，先別急著改屬性，沿著這三條線查一遍，八成的問題會停在某一條上；剩下兩成才是真的需要查文件、問設計師的狀況。