KEEL · 龙骨 · A CURRICULUM FOR THE AI ERA
组件与样式 — keel 龙骨
课程导读 · 每一条结论都要能在真实浏览器里量出同一个 computed 值
课程导读 · 每一条结论都要能在真实浏览器里量出同一个 computed 值
章节目录
- 01 · 两套样式是两套生成模型 — 这一章回答：一个按钮上，你写的 bg-red-600 和 antd 自己的蓝色，为什么可以同时存在、同时"生效"、而屏幕上只有一个结果——以及为什么第一直觉"再加狠一点"通常是错的方向。
- 02 · Tailwind v4：一次扫描决定产出什么 — 这一章回答：为什么我写了类名却没生成、生成的又比我写的多——以及 @import "tailwindcss" 这一行字，到底让编译器读了哪些文件、又写下了哪些规则。
- 03 · antd：运行时生成与一张变量表 — 这一章回答：同一个页面里三套主题为什么能共存、改一个 token 到底改了什么——以及 antd 的按钮明明和 Tailwind 的类名一样重，凭什么压得住它。
- 04 · 层序：谁赢是有先后规则的 — 这一章回答：当两套样式都想改同一个属性，"谁赢"到底是怎么算出来的——以及为什么加上那个号称"解决冲突"的开关之后，量出来的颜色可能一个像素都没变。
- 05 · 组件边界上的四种传参 — 这一章回答：给一个 antd 组件塞样式，一共有四种渠道（theme.token / styles / classNames / 自己写一条选择器），为什么有的生效、有的不生效？它们各自把改动落在了文档的哪一层，代价又分别是什么？
- 06 · 暗色与响应式：一个开关还是两个 — 这一章回答：给 <html> 加一个 class="dark"，为什么页面肤色变了、两个 antd 按钮却纹丝不动？暗色、响应式、方向、品牌色这些"状态"，各自到底有几个开关，它们又该由谁统一驱动？
- 07 · 交付面：体积、首屏与 SSR — 这一章回答：这套组合装到线上之后，用户到底下载了什么、第一眼看到的是什么——以及为什么"首屏先闪一下"这件事，只在服务端渲染时才会变成一个必须自己动手解决的问题。