D00 CSS 实战

本阶段目标：产出三个可复用的样式单元——组件、列表页布局、主题体系——每个都附带取舍记录，而不仅是能看的页面。

所属：frontend/css / D-实战 ｜ 上一篇：C08-图片表格与嵌入内容 ｜ 下一篇：D01-组件样式按钮与卡片 ｜ 返回：科目 README

路线图

三个项目由小到大：单个组件的状态体系 → 页面级网格与断点 → 跨页面的主题与令牌。

flowchart TD
    D1["D01 组件样式<br/>按钮与卡片"] --> D2["D02 响应式文章列表<br/>网格 + 容器查询"]
    D2 --> D3["D03 暗色主题与设计令牌<br/>变量分层 + 切换"]

    subgraph P1["组件"]
        D1
    end

    subgraph P2["页面与主题"]
        D2
        D3
    end

图 1 实战阶段路线图：D01 建立组件状态模型，D02 把它放进页面网格，D03 让整站可换主题

能力对照

能力	对应篇目	自检方式
写出状态完整、可复用的按钮	D01	默认、悬停、按下、禁用、加载五种状态均可见且可键盘触发
写出内容自适应的卡片	D01	卡片在窄栏与宽栏中排版正常，无固定宽度
完成响应式列表页布局	D02	360 至 1440 像素宽度无横向滚动，列数按预期变化
建立可切换的主题体系	D03	切换主题后整页配色变化，组件样式零改动
记录并解释技术取舍	全部	每篇附「实施清单 + 决策记录」，能说明两个不选方案的理由

阅读顺序

顺序	篇目	建议时长	必读	产出
1	D01 组件样式按钮与卡片	80 分钟	是	按钮与卡片两组组件样式
2	D02 响应式文章列表	80 分钟	是	列表页布局与断点方案
3	D03 暗色主题与设计令牌	70 分钟	是	令牌文件 + 主题切换

交付标准

• 三个项目共用一套令牌：颜色、圆角、间距只来自 :root。
• 组件样式不含固定像素宽度，能放进任意宽度的容器。
• 每篇结尾附实施清单与决策记录，条目与实际改动一致。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：D01-组件样式按钮与卡片