CSS MOC

用途：串連 CSS 版面、層級、文字與互動控制的相關筆記。 上層：Frontend MOC

版面與溢出

• flex 子元素 minWidth 0 撐滿但不溢出
• Parent overflow hidden 切掉 children (portal)
• 筆記：RWD（響應式網頁設計）檢查重點與實務

Cascade 與層級

• CSS Layer

文字與互動控制

• CSS 強制文字不換行
• 禁止使用者反白
• CSS 禁止滑動

元件樣式

• Checkbox 顏色

CSS-in-JS 與樣式契約

從「runtime 產生樣式的代價」一路到「元件該怎麼對外開放樣式」：

• CSS-in-JS 的成本是渲染期產生樣式與注入規則 — 建置期 vs 渲染期，以及 Linear 的量測
• 能在建置期算完，代表樣式不依賴執行期的任意值 — 效能與可預測性是同一個限制的兩面
• 樣式契約要用工具強制，逃生門要明示且有 scope — lint + 跨檔案 checker，CSS Modules 當明示出口
• 把 token 當佔位符，由 ThemeProvider 在邊界注入一條規則 — 生成式 theme 怎麼和靜態抽取共存
• 最難遷移的模式，往往正是讓舊系統難以推理的那些 — 遷移阻力當設計訊號

來源：Linear 從 styled-components 遷移到 StyleX

---