部分业务需提供打印或导出 PDF 的样式支持。

核心概念

• @media print 控制打印渲染。
• 隐藏不必要的交互元素。
• 分页控制使用 page-break-*。

实战步骤

• 为表格添加边框、阴影，提高可读性。
• 设置页面尺寸与页边距。
• 打印前预览，提醒用户配置。

进阶建议

• 结合 CSS Paged Media 生成复杂报表。
• 与 Puppeteer 集成批量生成 PDF。
• 在服务端提前渲染打印模板。

CSS 体积过大将影响渲染速度，需要预算与监控。

核心概念

• 关键路径 CSS 需内联以减少阻塞。
• 使用代码分割加载非关键样式。
• 监控样式表体积与选择器复杂度。

实战步骤

• 利用 critical 或 Penthouse 提取关键 CSS。
• 通过 purgecss/tailwind jit 清理未使用样式。
• 在 CI 中设定体积阈值，超出即失败。

CSS 决定视觉呈现，也可能影响可访问性。

核心概念

• 确保文本与背景色满足对比度要求。
• 避免依赖颜色传达信息，提供额外提示。
• 聚焦样式需明显，帮助键盘用户。

实战步骤

• 使用 :focus-visible 提供自适应焦点样式。
• 引用系统字体提升可读性与性能。
• 对隐藏内容使用 visually-hidden 保持语义。

进阶建议

样式变更需要自动化测试保证稳定性。

核心概念

• 视觉回归对比截图检测 UI 差异。
• Storybook 可作为组件测试平台。
• CSS Lint 工具确保编码规范。

实战步骤

• 使用 Playwright/Percy 执行视觉对比。
• 通过 jest-image-snapshot 集成到单元测试。
• 在 CI 中输出变更报告，快速审查。

进阶建议

• 结合构建管线识别受影响组件，减少测试范围。
• 记录 Lighthouse 指标监控样式变更影响。
• 建立设计与开发的同步评审流程。

CSS-in-JS 带来模块化与动态能力，需要关注性能与可维护性。

核心概念

• 运行时方案（styled-components）提供强大体验但有开销。
• 零运行时方案（vanilla-extract）在构建期生成样式。
• 样式插入顺序决定覆盖关系。

实战步骤

• 提取公共主题对象，实现跨项目复用。
• 使用 Babel/ESBuild 插件优化构建。
• 在 SSR 中收集样式并注入 HTML。

进阶建议

统一的 CSS 架构避免样式污染与维护困难。

核心概念

• BEM 命名规范为 Block、Element、Modifier。
• 结合 Utility Class 提升开发效率。
• 约定目录结构与构建策略。

实战步骤

• 创建样式指南并结合 lint 规则强制执行。
• 利用 PostCSS 自动化处理前缀与压缩。
• 在组件库中导出类型，辅助 IDE。

进阶建议

• 引入 CSS Modules 保证局部作用域。
• 使用 Stylelint 自定义规则。
• 通过设计 Token 驱动 BEM Modifier。

动画应提升体验而非干扰，性能与可访问性要同步考虑。

核心概念

• 优化动画属性，优先 transform 与 opacity。
• prefers-reduced-motion 提供降级方案。
• 关键帧与过渡需控制持续时间与缓动。

实战步骤

• 使用 @keyframes 构建时间线动画。
• 结合 CSS 变量调节动画参数。
• 通过 DevTools Performance 面板分析帧率。

Design Token 将设计决策抽象为变量，便于多端复用。

核心概念

• Token 分为核心、语义、组件级。
• CSS 自定义属性是实现 Token 的主要方式。
• 主题切换需考虑无障碍与性能。

实战步骤

• 通过 JSON 定义 Token，自动生成 CSS 变量。
• 实现深浅色主题切换与系统主题同步。
• 在组件库中引用语义 Token 保持一致性。

进阶建议

• 结合 Style Dictionary 与 CI 自动发布 Token。
• 将 Token 同步至原型工具 (Figma Tokens)。
• 在 SSR 中注入首屏主题，避免闪烁。

响应式设计需要从布局、排版与交互多维度考虑。

核心概念

• 断点应基于内容而非设备。
• Fluid Typo 配合 clamp 实现流式排版。
• 触控目标尺寸需保持可点击。

实战步骤

• 使用 clamp() 定义字体尺寸。
• 通过 aspect-ratio 管理媒体比例。
• 利用响应式图片 <picture> 提供不同资源。

Grid 提供二维布局能力，适合构建复杂界面。

核心概念

• Grid 定义行列轨道与轨道尺寸。
• grid-template-areas 提升语义化。
• auto-fit 与 minmax 支持自适应。

实战步骤

• 实现响应式仪表盘布局。
• 使用 repeat 与 fr 简化规则。
• 结合 grid-auto-flow 控制自动布局。