编辑“︁CSS代码审查”︁

= CSS代码审查 =

== 介绍 ==
'''CSS代码审查'''（CSS Code Review）是指通过系统化的检查流程，对CSS代码的质量、可维护性、性能及一致性进行评估的过程。这一实践在团队协作和大型项目中尤为重要，能有效减少样式冲突、提升渲染性能，并确保代码符合最佳实践标准。

审查通常关注以下核心方面：
* 代码结构组织（如BEM、SMACSS等方法论的应用）
* 选择器特异性（Specificity）管理
* 冗余代码检测
* 浏览器兼容性处理
* 性能优化（如减少重绘回流）
* 可访问性（a11y）合规

== 审查流程 ==
典型的CSS代码审查包含三个阶段：

<mermaid>
graph TD
    A[准备阶段] --> B[静态分析]
    B --> C[动态测试]
    C --> D[反馈与修正]
</mermaid>

=== 1. 准备阶段 ===
* 明确项目样式规范（如预处理器选择、命名约定）
* 建立审查清单（Checklist）
* 配置自动化工具（如Stylelint）

=== 2. 静态分析 ===
通过工具和人工检查发现潜在问题：

<syntaxhighlight lang="css">
/* 待审查代码示例 */
.header {
    color: #333;
    margin: 0 0 20px; /* 简写属性 */
}

.header--main { /* BEM修饰符 */
    font-size: 2em !important; /* 应避免!important */
}
</syntaxhighlight>

=== 3. 动态测试 ===
* 浏览器开发者工具检查渲染性能
* 跨浏览器/设备测试
* 可访问性审计（如WAVE工具）

== 关键审查项 ==
=== 选择器复杂度 ===
避免过度嵌套（尤其在Sass/Less中）：

<syntaxhighlight lang="scss">
/* 不推荐 */
nav {
    ul {
        li {
            a { color: red; }
        }
    }
}

/* 推荐 */
.nav-link {
    color: red;
}
</syntaxhighlight>

=== 特异性管理 ===
特异性计算公式：<math>\text{Specificity} = a\times1000 + b\times100 + c\times10 + d</math>
其中：
* a = 内联样式
* b = ID选择器
* c = 类/伪类/属性选择器
* d = 元素/伪元素选择器

=== 性能优化 ===
{| class="wikitable"
|+ 渲染性能对比
! 属性类型 !! 重绘代价
|-
| width, height | 低
|-
| margin, padding | 中
|-
| box-shadow, filter | 高
|}

== 实际案例 ==
'''电商网站头部样式审查'''：

<syntaxhighlight lang="css">
/* 问题代码 */
#header .nav > li.active a:hover {
    color: #FF0000; /* 1. 特异性过高 2. 硬编码颜色值 */
}

/* 改进后 */
:root {
    --primary-hover: #FF0000;
}

.main-nav__link--active:hover {
    color: var(--primary-hover);
}
</syntaxhighlight>

修正要点：
1. 用CSS变量替代硬编码
2. 采用BEM命名降低特异性
3. 移除冗余祖先选择器

== 自动化工具 ==
推荐工具组合：
* '''Stylelint'''：静态分析
* '''PurgeCSS'''：死代码消除
* '''Critical'''：关键CSS提取
* '''BrowserStack'''：跨平台测试

配置示例（.stylelintrc）：
<syntaxhighlight lang="json">
{
    "extends": "stylelint-config-standard",
    "rules": {
        "selector-max-specificity": "0,3,0",
        "color-named": "never"
    }
}
</syntaxhighlight>

== 审查清单 ==
* [ ] 是否遵循团队命名规范？
* [ ] 是否有未使用的样式？
* [ ] 是否过度使用!important？
* [ ] 媒体查询是否按移动优先原则组织？
* [ ] 动画是否使用transform/opacity优化？

== 进阶建议 ==
对于大型项目：
* 建立CSS统计报告（如css-analyzer）
* 实施视觉回归测试（如BackstopJS）
* 监控运行时样式变化（通过MutationObserver）

== 参见 ==
* [[CSS架构模式]]
* [[前端性能优化]]
* [[可访问性设计]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS最佳实践]]