css

CSS 开发指南

核心原则

• 编写语义化 HTML，提升可访问性和 SEO
• 使用 CSS 进行样式设置，避免内联样式
• 使用媒体查询和灵活布局确保响应式设计
• 优先使用外部样式表，而非内联或嵌入式样式

布局技术

Flexbox

• 使用 Flexbox 实现一维布局（行或列）
• 使用 justify-content 和 align-items 进行对齐
• 使用 flex-wrap 实现响应式换行
• 优先使用 gap 属性，而非外边距，以保持间距一致

Grid

• 使用 CSS Grid 实现二维布局
• 使用 grid-template-columns 和 grid-template-rows 定义网格模板
• 使用 grid-area 设置命名模板区域
• 使用 auto-fit 和 auto-fill 实现响应式网格

单位和排版

• 使用 rem 单位设置排版，以尊重用户偏好
• 使用 em 单位设置相对于组件的尺寸
• 避免使用 px 设置字体大小；仅用于边框和固定元素
• 适时使用 clamp() 实现流式排版
• 在全屏布局中谨慎使用视口单位（vw、vh）

CSS 变量（自定义属性）

• 在 :root 上将设计令牌定义为 CSS 变量
• 使用变量设置颜色、间距、排版和阴影
• 通过在不同上下文中覆盖变量实现主题化
• 使用语义化名称命名变量（例如，--color-primary、--spacing-md）

命名规范

BEM 方法

• 块：独立组件（例如，.card）
• 元素：块的一部分（例如，.card__title）
• 修饰符：块或元素的变体（例如，.card--featured）

最佳实践

• 类名使用小写字母和连字符
• 避免使用 ID 设置样式；保留给 JavaScript 钩子使用
• 使用单个类选择器降低特异性
• 将样式限制在组件范围内，避免冲突

特异性管理

• 尽可能将特异性保持在 0-1-0（单个类）
• 避免使用 !important 声明
• 有意运用级联，而非无意为之
• 考虑使用 CSS Layers（@layer）控制特异性

响应式设计

• 使用移动优先的媒体查询
• 使用相对单位实现灵活布局
• 在多种视口尺寸下进行测试
• 考虑使用容器查询实现组件级响应式设计

性能

• 尽量简化选择器
• 避免深层嵌套的选择器
• 使用高效的选择器（优先使用类选择器，而非元素选择器）
• 利用 CSS containment 隔离组件
• 考虑为首屏内容使用关键 CSS

现代 CSS 特性

• 使用 aspect-ratio 保持比例
• 在 Flexbox 和 Grid 中使用 gap
• 使用逻辑属性（margin-inline、padding-block）
• 使用 transition 属性实现平滑过渡
• 使用 @supports 检测特性支持情况

组织

• 按逻辑组织样式表（基础、布局、组件、工具）
• 保持文件模块化且专注
• 使用注释说明复杂样式
• 在声明中保持属性顺序一致

浏览器兼容性

• 必要时使用厂商前缀（可考虑 Autoprefixer）
• 在目标浏览器中进行测试
• 为较新的特性提供回退方案
• 采用渐进增强方式

可访问性

• 确保颜色对比度足够（至少符合 WCAG AA）
• 为键盘导航提供清晰可见的焦点样式
• 避免以影响屏幕阅读器的方式隐藏内容
• 为动画使用 prefers-reduced-motion 媒体查询