C00 CSS 高级

本阶段目标：处理真实项目里的三件事——组件要能复用到不同容器、样式表要能被多人长期维护、页面在低端设备上仍要流畅。

所属：frontend/css / C-高级 ｜ 上一篇：B08-字体与网络字体加载 ｜ 下一篇：C01-现代布局与逻辑属性 ｜ 返回：科目 README

路线图

八篇沿「布局能力 → 组织方式 → 渲染成本 → 可访问性 → 交付 → 滚动 → 控件 → 嵌入内容」推进。

flowchart TD
    C1["C01 现代布局与逻辑属性"] --> C2["C02 可维护 CSS 与命名分层"]
    C2 --> C3["C03 渲染性能"]
    C3 --> C4["C04 无障碍与视觉"]
    C4 --> C5["C05 CSS 工程化"]
    C5 --> C6["C06 滚动吸附与滚动行为"]
    C6 --> C7["C07 表单控件与原生控件"]
    C7 --> C8["C08 图片表格与嵌入内容"]

    subgraph P1["能力与组织（C01 ~ C02）"]
        C1
        C2
    end

    subgraph P2["质量与交付（C03 ~ C05）"]
        C3
        C4
        C5
    end

    subgraph P3["交互与内容（C06 ~ C08）"]
        C6
        C7
        C8
    end

图 1 高级阶段路线图：C01 ~ C02 决定样式能否复用与维护，C03 ~ C05 决定页面是否流畅、可用、可交付，C06 ~ C08 覆盖滚动、控件与嵌入内容三类高频场景

能力对照

能力	对应篇目	自检方式
让组件适配不同宽度的容器	C01	同一卡片在窄栏与宽栏中排版均正常，无需新增断点
用容器单位随容器缩放字号	C01	标题字号随容器宽度变化，与视口无关
用逻辑属性适配书写方向	C01	把 dir 改为 rtl 后布局仍然正确
组织可长期维护的样式表	C02	新增一个组件只改一个文件，不影响其它组件
定位并降低渲染成本	C03	用 Performance 面板找出长任务并消除
让页面对辅助技术与弱视用户可用	C04	对比度达标，焦点可见，动效可关闭
把样式交付为可发布产物	C05	产物带压缩、带版本号，可在无构建环境运行
选择预处理与作用域方案	C05	能说明四条路径的求值时机与类名归属差异
让轮播与分段列表停在正确位置	C06	松手后停在子项中心，锚点标题不被顶栏遮挡
统一样式化原生表单控件	C07	复选框、单选、开关、文件选择键盘可达且状态可见
让图片、表格与嵌入内容比例稳定	C08	任意原图填满同一外框，表格列宽不随内容抖动

阅读顺序

顺序	篇目	建议时长	必读	说明
1	C01 现代布局与逻辑属性	70 分钟	是	组件复用与多语言方向
2	C02 可维护 CSS 与命名分层	60 分钟	是	多人协作的前提
3	C03 渲染性能	60 分钟	是	低端设备上的体验下限
4	C04 无障碍与视觉	50 分钟	是	对比度与动效偏好
5	C05 CSS 工程化	60 分钟	否	从手写走向可交付
6	C06 滚动吸附与滚动行为	50 分钟	是	轮播、锚点与滚动链
7	C07 表单控件与原生控件	60 分钟	是	原生控件样式化
8	C08 图片表格与嵌入内容	55 分钟	是	替换元素与表格布局

跳过建议

• 单页静态站点：C05 可后置。
• 不涉及多语言与 RTL：C01 只读 3.1 节的容器查询部分。
• 不使用轮播与弹层：C06 可只读 3.2 节的锚点留白部分。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：C01-现代布局与逻辑属性