Terry Yao's Blog

ROADMAP

ROADMAP

閱讀時間約 6 分鐘

CH2 · CSS 詳細 ROADMAP

計畫文件，不會被 Quartz 渲染。 回主 roadmap → frontend/ROADMAP.md

章節目標

CSS 是最難 debug 的前端語言——不會報錯、相依性多、一改影響四方。建立完整的 CSS 能力：從 Box Model 到 Container Query、從 Flex 到 Grid、從單色到 OKLCH、從純 CSS 到跟 Storybook / Figma 整合的工作流。

🌱 基本介紹

#主題SlugStage大綱
01CSS 是什麼01-what-is-css🌱樣式表定義、瀏覽器 CSSOM、CSS 跟 DOM 的關係
02為什麼 CSS 是最難 debug 的語言02-why-css-is-hard🌱不會報錯、繼承、cascade、specificity、stacking context、父層影響、為什麼 CSS-in-JS / Tailwind / CSS Module 都在嘗試封裝
03Specificity & Cascadespecificity🌿已有

❓ 為什麼需要

#主題SlugStage大綱
04為什麼需要 CSS（為什麼不用 inline style）04-why-css🌱內容與呈現分離、可維護性、快取友善、選擇器系統的威力
05為什麼需要 CSS Preprocessor（Sass/Less 解了什麼）05-why-preprocessor🌱純 CSS 時代的痛：變數、mixin、巢狀、函式、模組、然後現代原生 CSS 補上了什麼
06為什麼需要 CSS Framework（Bootstrap 解了什麼）06-why-framework🌱跨瀏覽器不一致、快速 prototyping、響應式設計門檻、團隊一致性、為什麼 Tailwind 不同於 Bootstrap
07為什麼需要 scoped CSS / CSS-in-JS（全域污染問題）07-why-scoped-css🌱CSS 全域污染、naming 衝突、BEM 的極限、React/Vue 為什麼要自己搞 CSS 方案

🕰️ 演進

#主題SlugStage大綱
08CSS 版本史08-css-version-history🌱CSS1 → CSS2 → CSS3 模組化 → CSS 4 Baseline、含 Reset / Normalize 演進
09佈局演進史09-layout-evolution🌱Table → Float → Inline-block → Flexbox → Grid → Container Query
10RWD 演進史10-rwd-evolution🌱純 @media → clamp / Container / View Transitions / Intrinsic Web Design
11CSS 框架哲學演進11-css-framework-philosophy🌱Bootstrap（元件式）→ Tailwind（utility-first）→ CSS-in-JS（JS 驅動）→ Vanilla revival
12CSS 預處理器演進12-css-preprocessor-evolution🌱Less → Sass/SCSS → Stylus → PostCSS → Lightning CSS
13CSS Architecture 方法論演進13-css-architecture-methodology🌱OOCSS → SMACSS → BEM → ITCSS → Atomic CSS → Tailwind Utility-first

🧠 知識型

佈局基礎

#主題SlugStage大綱
14Box Modelbox-model🌿已有
15Flexboxflexbox🌿已有
16Gridgrid🌿已有
17Grid 進階17-grid-advanced🌱grid-template-areas、minmax()、auto-fit vs auto-fill、命名線
18Positioningpositioning🌿已有
19RWD 與 Media Queryrwd🌿已有

現代選擇器與層疊

#主題SlugStage大綱
20:has() / :where() / :is() 現代選擇器20-modern-selectors🌱2023+ 支援、:has() 改變遊戲規則、:where() 特異性歸零
21@layer Cascade Layers21-cascade-layers🌱解決 specificity 戰爭、reset / components / utilities 分層
22CSS Nesting（native）22-native-nesting🌱跟 Sass nesting 的差異、何時該用
23Subgrid23-subgrid🌱巢狀對齊、Grid 子層繼承

現代佈局與計算

#主題SlugStage大綱
24Container Query24-container-query🌱跟 Media Query 的差異、component-level RWD
25現代 CSS math25-modern-css-math🌱clamp() / min() / max()、fluid typography
26aspect-ratio26-aspect-ratio🌱取代 padding-top trick
27Logical Properties27-logical-properties🌱margin-inline-start / padding-block、i18n 必備、RTL 友善
28Anchor Positioning28-anchor-positioning🌱2024 新，anchor-name / position-anchor、原生取代 Popper.js

視覺效果

#主題SlugStage大綱
29Transform（2D / 3D）29-transform🌱translate / scale / rotate、perspective、3D
30Transition / Animation / Keyframes30-transition-animation🌱觸發時機、效能、easing
31Scroll-driven Animations31-scroll-driven-animations🌱2024 新，scroll-timeline / view-timeline
32Filter / backdrop-filter32-filter-backdrop🌱blur / 毛玻璃、效能
33Gradient / Shadow / Border / Shapes33-gradient-shadow-shapes🌱conic-gradient、clip-path / CSS Shapes
34View Transitions API34-view-transitions🌱MPA/SPA 頁面切換動畫
35CSS Houdini（Paint API）35-css-houdini🌱Paint Worklet、可程式化 CSS

色彩與排版

#主題SlugStage大綱
36現代色彩空間36-modern-colors🌱color-mix() / OKLCH / HDR
37Typography 系統37-typography-system🌱modular scale、fluid typography、text-wrap: balance
38Variable Fonts38-variable-fonts🌱font-variation-settings、字重無段差

Theming

#主題SlugStage大綱
39CSS 變數與 Theming39-css-variables-theming🌱--var、運行時切換、@property typed custom properties
40深色模式與主題切換40-dark-mode🌱prefers-color-scheme、避免 flash、light-dark()

效能

#主題SlugStage大綱
41CSS Selectors 效能41-selectors-performance🌱右到左匹配、過深選擇器代價、實測影響
42Paint / Composite 觸發分析42-paint-composite🌱reflow / repaint / composite、will-change、CSS Containment
43Fonts Loading 策略43-fonts-loading🌱FOIT vs FOUT、font-display、preload、subsetting

🔧 小實作注意事項

#主題SlugStage大綱
44CSS Debug / Trace 流程44-css-debug-workflow🌱DevTools Elements/Computed、Cascade trace、Specificity 溯源、Visual debugger、二分法 disable
45置中的 10+ 種方法45-centering-techniques🌱Flex / Grid / absolute+transform / margin:auto / place-items
46CSS2 時代最小 grid system46-css2-min-grid🌱float / inline-block / percentage 做 12-column grid
47CSS2 時代最小 RWD47-css2-min-rwd🌱@media + float + viewport
48!important 使用時機與反例48-important-when🌱override third-party 的唯一合理場景
49Scroll Snap49-scroll-snap🌱scroll-snap-type / scroll-snap-align
50CSS 冷知識集50-css-trivia🌱all: unset、gap 在 flex 也能用、accent-color
51Print CSS / PDF 匯出51-print-css🌱@media print、page-break-*
52CSS 跟 JS 的邊界52-css-vs-js-boundary🌱什麼該 CSS、什麼該 JS、效能差異
53造自己的 Utility CSS53-mini-tailwind🌱→ walkthroughs W02
54Bootstrap 怎麼用54-bootstrap-guide🌱Grid / Components / 跟現代的落差
55Tailwind 怎麼用55-tailwind-guide🌱Utility-first、JIT、自訂 config、Tailwind 4.0
56CSS-in-JS vs CSS Module 選型56-css-in-js-vs-module🌱Runtime cost、TS 整合、SSR 考量
57Storybook 中的 CSS57-storybook-css🌱Component-driven、視覺迴歸（Chromatic）
58Figma + AI 工具整合58-figma-ai-tools🌱Figma Dev Mode、v0.dev、Builder.io、Anima、Locofy
59CSS 動畫靈感來源集59-css-inspiration🌱CodePen、Awwwards、CSS Design Awards

💣 Anti-pattern

#主題SlugStage大綱
60CSS Anti-patterns60-css-anti-patterns🌱!important 濫用、過深選擇器、magic numbers、全域污染、z-index 戰爭

🧰 對應檢查工具

#主題SlugStage大綱
61CSS 檢查工具61-css-tooling🌱Stylelint、PostCSS、Prettier、CSS coverage、Specificity calculator、Can I Use

章節進度統計

  • 知識主題：61 項
  • 🌿 growing：6（已有）
  • 🌱 seed：55

跨系列連結

  • → frontend/html/ CH1
  • → frontend/a11y/ CH12
  • → frontend/framework/ CH6（Vue/Svelte Scoped CSS、CSS Modules 深入）
  • → seo/10-performance-cwv
  • → W01–W02 walkthroughs
  • → W05 CMS capstone

關係圖譜

反向連結

  • ROADMAP

    Walkthroughs 詳細 ROADMAP 計畫文件，不會被 Quartz 渲染（無 frontmatter）。 公...