沒有一杯咖啡解決不了的 CSS，如果有，就交給 AI 吧——然後你發現 AI 把整頁都 position: absolute 了，跑版跑到懷疑人生，只好再來一杯。
你是不是也遇過：打開 Cursor 或 Claude，丟一句「幫我做響應式產品頁」，幾秒鐘就吐出一堆看起來很漂亮的 CSS。你心裡想：太好了，以後不用學了。結果換個螢幕寬度，版面像被貓踩過一樣。
結論先講：要學。但學法跟以前完全不一樣。 你現在的任務不是背語法，是當 AI 的「版面審查員」——它負責產碼，你負責把關，別讓它把 PageSpeed 分數和 SEO 一起帶去陪葬。
目錄
你不再是「寫 CSS 的人」，是「審 CSS 的人」
以前學 CSS，很大一塊時間花在背屬性——align-content 有幾個值、flex-shrink 預設是多少。老實說，現在 Google 一下就好，死背這些就像記咖啡機型號：知道有這台就好，不必背到能朗誦說明書。
真正值錢的，是你能不能一眼看出 AI 寫的版面哪裡怪怪的，然後用一句話把它拉回正軌。不然你就會陷入那種經典循環：跟 AI 來回對話十輪，Bug 還在，咖啡倒是喝了三杯。
AI 是乘數：底子越厚，它幫你越猛
Josh Comeau 和 Kevin Powell 這類前端大師都說，我們正在進入「後開發者時代」。AI 跟你的關係比較像乘數，不是替身：
- 底子薄 (1) × AI (10) = 10：MVP 很快做出來，但 Bug 一來就卡死，成品也上不了檯面。
- 底子厚 (10) × AI (10) = 100：繁瑣 code 交給 AI，你用真的懂的東西（效能、a11y、可維護性）把關。
白話說：AI 會放大你的能力，也會放大你的盲點。底子不夠，它幫你「快」；底子夠，它幫你「又快又好」。
AI 越強，你越需要 CSS 心智模型
AI 能寫 code，但它沒有眼睛，也沒有「這樣排版合理嗎」的直覺。所以它常給你看起來對、實際很慘的解法——像自動咖啡機偶爾會出現一杯看起來是拿鐵、喝起來是苦水的東西：
- 亂用
position: absolute：對不齊就硬拉，換個螢幕寬度整頁跑版。經典 AI 起手式。 - 還在堆
@media斷點：訓練資料裡舊 code 太多，很少主動用clamp()或 Container Queries。 z-index: 9999加到手酸還是沒用：不懂層疊上下文，你就只能跟 AI 無限對話，永遠修不好。這時候再來一杯咖啡也沒用，得先搞懂概念。
這幾件事，AI 真的替不了你
| 概念 | AI 常犯的錯 | 你要會的 |
|---|---|---|
| 正常流 (Flow) | 版面一亂就加定位硬撐 | 知道元素預設怎麼排、什麼時候才該脫離流 |
| 佈局選型 | 簡單橫排用 Grid、二維版面用 Flex | 1D 用 Flex、2D 用 Grid——選錯工具後面全慘 |
| Intrinsic Sizing | 直接 width: 300px 寫死 | 讓內容決定大小，別讓 AI 把寬高焊死 |
| 設計系統 (Tokens) | 到處 #3b82f6 這種 hardcode | 逼它用 --color-primary 這類變數 |
CSS 跟 SEO 其實綁在一起（Google 也在看）
很多人以為 CSS 只影響長相。錯。在 2026 年，它直接碰 Core Web Vitals (CWV)——Google 拿來衡量體驗的分數，跟排名也有關係。版面再漂亮，分數掉光，搜尋流量也會跟著掉，這比咖啡涼掉還難受。
AI 亂寫的 CSS，很容易搞出這些問題：
- CLS（版面位移）：圖片沒尺寸、內容突然插入，頁面會跳來跳去。你要自己檢查有沒有用
aspect-ratio，或預留空間。 - INP（互動延遲）：動畫用
width會觸發重排，卡卡的。引導它改用transform，分數通常好看很多。
想搞懂門檻跟優化清單，可以看這篇：PageSpeed Insights 與 Core Web Vitals 2026 完全指南。
四階段學習路線（邊做邊跟 AI 練，別乾讀）
如果你現在要重新學 CSS，我會建議照這張地圖走——每完成一階段，可以獎勵自己一杯咖啡，但別邊喝邊讓 AI 自由發揮：
- 階段 1：先把心智模型建起來——拿 AI 生成的卡片，把裡面所有
absolute拔掉，改用 Flex 對齊。你會很快發現「流」是什麼感覺。 - 階段 2：Flex + Grid 分工——外層 12 欄用 Grid，內層元件用 Flex。練習下指令：「1D 用 Flex、2D 用 Grid，並說明為什麼。」
- 階段 3：元件級響應式——少靠全局
@media，多學 Container Queries。可以要求 AI：「父層設container-type，不要只靠斷點。」 - 階段 4：效能實戰——把 AI 產出的 code 丟進 PageSpeed Insights，看 LCP、CLS 掉在哪。順便學
content-visibility怎麼救長頁面。
別只說「幫我做一個卡片」——給它一個好 Prompt
模糊指令 = 模糊產出。就像你走進咖啡店只說「給我一杯好喝的」，店員也只能猜。你可以直接複製下面這個結構，再依專案改：
請為我實作一個響應式文章卡片元件：
1. **佈局**：使用語意化 HTML5；圖片在上、標題在下、按鈕靠底對齊（使用 Flex + margin-top: auto）。
2. **設計系統**：嚴格使用 var(--color-primary-600) 與 var(--spacing-md)，禁止使用 Hardcode 色碼。
3. **響應式**：使用 Container Queries。當寬度小於 280px 時，切換為緊湊模式。
4. **效能**：hover 效果僅限 transform 與 box-shadow，確保動畫流暢。
5. **a11y**：確保 focus 狀態可見，且文字對比符合 WCAG AA 標準。
6. **要求**：請先解釋你選擇佈局模式的理由，再提供 CSS 代碼。重點不是 prompt 很長，而是把決策權留給你——先讓它解釋為什麼這樣排，你再決定要不要採用。AI 是外骨骼，腦袋還是你的。
結語：會寫 CSS 的人變多了，會審 CSS 的人更值錢
「會寫 CSS」這件事本身，價值正在變薄。真正有差的是：你能不能交付一個能上線、好維護、分數也好看的成品。
最後一句送給你：沒有一杯咖啡解決不了的 CSS，如果有，就交給 AI——但記得，審完再來一杯。
