我测试了5个用于重构CSS的AI工具：以下是我学到的内容

重构遗留CSS风险极高。一开始只是快速清理未使用的选择器、冗余声明或特殊性技巧，但这些都可能很快破坏布局对齐，而视觉回归测试无法捕捉到。随着AI编码助手成为日常前端工作流程的必备工具，将样式表清理交给大型语言模型似乎是合乎逻辑的下一步。

“重构这个CSS。”

这是我给五个AI工具——ChatGPT、Claude、Copilot、Cursor和Gemini——提出的提示，看看哪个AI工具对CSS的重构效果最好。测试时，我创建了一个简单的产品卡组件，包含七个特定且刻意选择的CSS陷阱，每个陷阱测试重构可能出错的不同方式。

本文将评估这五个AI助手如何处理级联顺序、特异性关联、堆叠上下文和选择器范围，跨越通过/不通过基准，探讨AI工具引入视觉或功能回归的七个关键发现，并回顾整体排名，以确定你真正值得信赖的样式表工具。

测试设置

我用了五个免费版的AI工具，默认配置，如何在 Windows 11/10 中将本地帐户更改为管理员 - 致知笔记 - 专注教程知识分享 因为大多数人会用这些工具;然而，该方法和示例样式表可以重复使用来测试任何其他 AI 工具、层级或模型：

AI工具	模型	类型
ChatGPT	GPT-5.5	聊天界面
克洛德	克洛德第五十四行诗，中等	聊天界面
副驾驶	猛禽迷你	编码代理（在 VS Code 中）
光标	作曲家2.5 Fast	编码代理（独立编辑器）
双子座	双子座3.5闪电	聊天界面

所有AI工具都能访问HTML和CSS文件。

这是HTML格式：

<div class="card-wrapper">
  <div class="card">
    <div class="card-image-container">
      <img class="card-img" src="..." alt="Product">
    </div>
    <span class="badge badge-new">New</span>
    <h2 class="card-title">Wireless Headphones Pro</h2>
    <p class="card-description">Premium sound with active noise cancellation and 30-hour battery life.</p>
    <div class="tags-container">
      <span class="tag">Audio</span>
      <span class="tag">Wireless</span>
      <span class="tag">Premium</span>
    </div>
    <div class="card-footer">
      <button class="btn-primary">Add to Cart</button>
    </div>
  </div>
</div>

这是CSS：

/* CARD COMPONENT */
.card-wrapper .card {
  background: #fff;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 320px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}
​
.card-wrapper .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}
​
/* IMAGE */
.card .card-image-container {
  position: relative;
  z-index: 2;
}
​
.card .card-image-container img.card-img {
  width: calc(100% + 40px);
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  margin: -20px -20px 0;
}
​
/* BADGE */
.card .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3 !important;
  background-color: #4caf50;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  display: inline-block;
}
​
.card .badge.badge-new {
  background-color: #43a047;
}
​
.promo-active .card .badge {
  background-color: #ff9800 !important;
}
​
/* TITLE */
.card h2.card-title {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin: 8px 0 4px;
  line-height: 1.3;
}
​
/* BODY TEXT */
.card p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}
​
.card p.card-description {
  color: #666666 !important;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
​
/* TAGS */
.card .tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
​
.card .tags-container .tag {
  background: #f0f0f0;
  color: #333;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}
​
.card .tags-container .tag:hover {
  background-color: #e0e0e0;
}
​
/* FOOTER */
.card .card-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}
​
/* BUTTON */
.card .card-footer .btn-primary {
  display: block;
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background-color: #1a73e8;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
​
.card .card-footer .btn-primary:hover {
  background-color: #1557b0;
  opacity: 0.95;
}

这是浏览器渲染时的样子（悬停时，画面会稍微向上移动，周围会出现柔和的阴影）：

你可以在这个GitHub仓库中找到包如何更改 Microsoft 帐户密码 - 致知笔记 - 专注教程知识分享 含原始HTML和CSS文件以及五个重构样式表的完整项目，也可以在这里观看现场演示。

AI工具的7个CSS测试用例

现在，让我们看看七个CSS陷阱：

测试1——悬停级联

该规则包含两个声明。第一个用！重要 关键词，所以它在规则中出现得更早却获胜：.card-wrapper .card:hover``box-shadow

.card-wrapper .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  /* ... */
}

测试2 – 堆栈上下文

“NEW”徽章位于图像左上角，并通过 和 建立了自己的堆叠上下文。.card-image-containerposition: relativez-index: 2

徽章看起来像是在防止被另一条规则凌驾，如何从计算机中移除 Microsoft 帐户 - 致知笔记 - 专注教程知识分享 但实际上，这面旗帜只是累赘;本文件中其他内容都不会影响 ，因此删除 也不会改变这里：z-index: 3 !important!importantz-index.badge!important

.card-wrapper .card {
  /* ... */
  position: relative;
  z-index: 1;
}
​
.card .card-image-container {
  position: relative;
  z-index: 2;
}
​
.card .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3 !important;
  /* ... */
}

然而，将整条声明从中移除则是另一回事。如果我们完全脱掉，徽章就会消失在图像后面。z-index.card .badgez-index: 3

测试3 – 近似重复的数值

和选择器有外观相似但不同的绿色数值（vs ），它们是Material Design相邻的“绿色500”和“绿色600”。假设这些是意外重复并合并的工具会引入真实但微妙的变化：.badge.badge-new#4caf50``#43a047

.card .badge {
  /* ... */
  background-color: #4caf50;
  /* ... */
}
​
.card .badge.badge-new {
  background-color: #43a047;
}

测试4——州级覆盖

选择器会将徽章颜色从绿色变为橙色。只有当应用程序的其他部分在运行时添加该类时才适用。由于默认演示中没有执行这一规则，因此很容易将其视为死代码：.promo-active .card .badge``.promo-active

.promo-active .card .badge {
  background-color: #ff9800 !important;
}

这里不像Test 2那样是累赘，因为它们在特异性上是绑定的（每门三门课），正如Keegan Street的特异性计算器所示：!important.promo-active .card .badge.card .badge.badge-new

因此，确保促销颜色获胜的是旗帜本身，而非具体性。如果工具在平局保持时移除了标志，则由源顺序决定。这里，这意味着促销徽章保持绿色。!important

测试5——部分清理

选择器重复和，基于通用规则，这确实是多余的。如何在 Windows 11/10 计算机上打开 ZIP 文件 - 致知笔记 - 专注教程知识分享 另一方面，它还包含了两行文本截断所需的声明，这些声明不应被清理：.card p.card-descriptioncolorfont-size``.card p

.card p {
  color: #666;
  font-size: 14px;
}
​
.card p.card-description {
  color: #666666 !important;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

测试6 – 选择器示波器

有几个选择器被有意地置于该类之下（例如，， ， ， 等）。.card.card .card-footer .btn-primary.card .tags-container .tag``.card .badge

在这个孤立的演示中，将它们压平化完全有效，但这些选择器名称（例如，和）足够通用，以至于在真实更大的代码库中，一旦它们无作用域，可能会与无关的全局样式发生冲突：.btn-primary``.tag

.card .badge {
  /* ... */
}
​
.card .tags-container {
  /* ... */
}
​
/* ... */
​
.card .card-footer .btn-primary {
  /* ... */
}

测试7 – 供应商前缀

正如上面测试5提到的，用一个十年前的非标准改版截断成两行，看起来就像急于清理的清理会“现代化”去除的效果：.card-description

.card p.card-description {
  /* ... */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

这套代码不应被现代化。如果工具将其替换为更新的、未加前缀的属性，而不是保持原样，截断就会失效，因为大多数浏览器仍然只支持 -webkit- 前缀版本。line-clamp

每个AI工具在每次测试中的表现如何

由于篇幅有限，我不会复制这里的五个重构样式表;你可以在GitHub仓库中找到它们。

不过，这里有一个ChatGPT、Claude、Copilot、Cursor和Gemini在七项重构测试中的通过/不通过矩阵：

测试	ChatGPT	克洛德	副驾驶	光标	双子座
1. 悬停级联
2. 堆叠上下文	(#1)	(#2)	(#1)		(#1)
3. 近似重复的数值
4. 州级覆盖	(#3)	(#3)	(#3)	(#3)	(#3)
5. 部分清理
6. 选择器范围				(#4)
7. 供应商前缀

– 通过 – 回归（行为明显改变） – 今天仍可行，但仅因该文件的具体性——在更大代码库中存在真实风险

通过/不通过表格注释

(#1)ChatGPT、Copilot 和 Gemini 都从自身中掉落，只保留 ，这本身并不能形成叠加上下文。今天之所以安全，是因为页面上没有其他使用。参见“发现II”。如下。z-index: 1.cardposition: relative``z-index

(#2)Claude的重构存在两个风险：它放弃了自己的代码，就像脚注#1中的三个AI工具一样;其徽章与图片的修复依赖于标记顺序而非明确的值。参见“发现II”。如下。.card``z-index

(#3)五个选手都通过了，但很可能是巧合，而不是因为他们认出了最初选拔者的平局。详见下文“寻找V.”。

(#4)光标是测试6中唯一保留了任何范围定位的工具（徽章家族和顶层规则）。我还是标记了它，因为它扁平了，和其他四个工具一模一样。参见“发现III”。如下。.card.btn-primary.tag

AI CSS 重构结果分析

以下发现并非为每场测试单独整理。有些测试将多个测试归为一组，另一些则完全不绑定任何特定测试。它们包含了我在审查重构代码期间和之后的观察。

为避免与上述七场测试赛（测试赛1至测试7）混淆，它们用罗马数字编号。

发现I：所有AI工具都成功消除了明显的CSS冗余

五个AI工具都移除了标题上的重复备份：font-size

--- original/style.css
+++ (all five outputs, identical here)
  .card-title {
-   font-size: 18px;
    font-size: 1.125rem;
    font-weight: 700;
    ...
  }

他们还取消了颜色上的重复，这已经被一级以上的普通规则覆盖了。!important.card-description.card p

这两者都不是七个设计陷阱之一，所以这里没有真正的判断，只有明确安全可以删除的代码。那是底线，不是区别;所有工具都顺利清除了它。

发现二：AI工具难以理解CSS级联反应

级联很可能是CSS中最难理解的概念。即使在这个超级简单的单文件CSS演示中，AI工具仍然会被它弄糊涂。

级联问题在两个测试中表现出来：测试1的阴影冲突和测试2的叠加上下文脆弱性。两者都归结于同一个基本技能：正确推理浏览器实际适用的规则，而不是看起来是哪条规则是设计的。

悬浮级联（测试赛1）——一致未中

由于无论源顺序如何，都胜过普通声明，所以在原始CSS中渲染的是第一个盒子阴影，而不是第二个：!important

--- original/style.css
+++ (all five outputs, identical here)
  .card:hover {
-   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;  /* this one wins in the original */
-   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);              /* never applies in the original */
+   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);              /* every tool kept the losing value */
    transform: translateY(-2px);
  }

然而，Claude、Copilot、Cursor、ChatGPT 和 Gemini 都保留了源文件中从未实际应用过的值。这是一种真正的倒退，而非风格上的差异。悬停阴影从紧密的4像素/12像素模糊变成明显更大、更柔和的模糊。

五个工具中有四个还新增了原版没有的功能：开启，将悬停状态从瞬间吸附变成流畅动画。只有克洛德没有动过它。这是否算回归取决于我们所说的“重构”是什么意思。新增的过渡不会像上面的阴影值那样误导原始文件，但仍然是未被请求的更改。transition``.card

叠加语境（测试2）——五项都算合格，但安全性不高

五个AI工具中没有一个在视觉上破坏了徽章叠加图像的渲染，但有两个工具的呈现方式截然不同。比较Gemini和Claude在同一条规则上的重构：

--- original/style.css
+++ refactors/gemini.css
  .card-image-container {
-   position: relative;
-   z-index: 2;
  }
--- original/style.css
+++ refactors/claude.css
  .card-image-container {
    position: relative;
-   z-index: 2;
  }

Gemini移除了和，使元素完全静止，这保证了它在仍保持位置的徽章之前绘制的阶段，因此无论周围发生变化，排序结构上都是安全的。position``z-index

而克劳德则只是被移除并留下，所以徽章现在都被替换，处于同一涂装阶段。这意味着它们的可见性完全取决于HTML中哪个先出现，CSS中没有任何明确的规定。在标记中交换两者，CSS保持不动，徽章就会消失在图片后面：z-indexposition: relative.card-image-container``z-index: auto

<!-- Today: badge paints on top -->
<div class="card-image-container">...</div>
<span class="badge badge-new">New</span>

<!-- CSS unchanged, markup order swapped: badge is now hidden -->
<span class="badge badge-new">New</span>
<div class="card-image-container">...</div>

虽然这种直接交换在现实代码库中不太可能发生，但更现实的做法是第三个元素（例如愿望单图标或第二个徽章）在它们之间出现，而没有明确的 ，会不可预测地扰乱堆叠。z-index

ChatGPT、Cursor 和 Copilot 都为徽章和图片容器保留了明确的值值——但只有 Cursor 也保持了自身值。没有它，单靠它无法形成叠加上下文，所以ChatGPT、Claude、Copilot和Gemini都失去了产品卡价值无法与外部竞争的隔离感。如今是看不见的，因为页面上没有其他元素使用，但当卡片靠近任何其他位置的z轴索引元素时，它就变得真实。z-indexz-index: 1.cardposition: relativez-index``z-index

发现三：选择器示波器变平是AI常见的盲点（测试6）

我原本以为第六场测试会分裂竞争。结果并没有，但这是个更有趣的发现。每个人工智能工具都会压制测试设计要捕捉的选择器，例如：

--- original/style.css
+++ (all five outputs, identical here)
- .card .card-footer .btn-primary {
+ .btn-primary {
    display: block;
    width: 100%;
    ...
  }
.tag`、、、、，并且所有五种工具都得到了相同的处理。在一个孤立的演示中，这种体验是隐形的;在真实的代码库中，和正是很可能已经存在于全局样式表中的通用名称，将它们从“的范围中平整化”是真实的风险，而非假设性风险。`.card-title``.card-footer``.card-image-container``.card-img``.btn-primary``.tag``.card

唯一的部分例外是光标，它保持徽章家族的范围，而其他人则将其压平：

--- original/style.css
+++ (ChatGPT/Gemini/Claude/Copilot — all four flattened this selector; Cursor did not)
- .card .badge {
+ .badge {
    ...
  }

看起来Cursor比其他四个工具更谨慎，但它仍然不是全面谨慎，因为它保留了徽章家族和顶层规则，同时像其他工具一样把其他部分完全压平了。.card

发现 IV：AI 工具在 CSS 清理过程中常常做出错误假设

有些AI工具做了不该做的假设。测试3抓获了克劳德和双子的现行，而测试5则揭露了ChatGPT和双子。

几乎重复的徽章颜色（测试3）

.badge` (`#4caf50`）和（）是有意不同的色调。双子座和克劳德都将它们合并为一个值：`.badge-new``#43a047
--- original/style.css
+++ refactors/gemini.css and refactors/claude.css
  .badge {
-   background-color: #4caf50;
+   background-color: #43a047;  /* .badge-new's color, now used for both */
  }
- .badge-new { background-color: #43a047; }

这是一种倒退，只是微妙且潜在的。如上所述，这两款绿色是Material Design相邻的“Green 500”和“Green 600”色号，相近到视觉差异几乎难以察觉。然而，Gemini和Claude都把 的颜色移到了基础规则中，并完全删除了，所以原本两个独立可调的颜色现在只剩一个。今天换个颜色，所有徽章都会随之变化，无论是否有标记。.badge-new.badge.badge-new``.badge-new

ChatGPT、光标和副驾驶保持了两个值的分离。

部分清理（测试5）

ChatGPT和Gemini也做出了类似的错误假设，但情况正好相反。他们没有像之前那样将某条规则的价值提升到通用规则中，而是将通用规则合并进具体规则，删除并直接合并其样式：.card p``.card-description

--- original/style.css
+++ refactors/chatgpt.css and refactors/gemini.css
- .card p {
-   margin-bottom: 12px;
-   color: #666;
-   font-size: 14px;
-   line-height: 1.5;
- }
  .card-description {
+   color: #666;
+   font-size: 14px;
+   line-height: 1.5;
+   margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

光标、克劳德和副驾驶都将两条规则分开，保留了原版的真实意图。

寻找V：所有AI工具都通过的CSS陷阱

每个AI工具都通过了两个测试：测试4和测试7。然而，在测试4中，这种情况带有免责声明。

状态覆盖（测试4）

ChatGPT、Claude、Copilot、Cursor 和 Gemini 都移除了 的旗帜，结果没有任何损坏，尽管任何工具的输出都没有表明这是有意为之，而非均匀压平的副作用。在原始文件中，和 是基于具体性（即各三个职业），唯一保证促销颜色获胜的因素。!important.promo-active .card .badge.promo-active .card .badge.card .badge.badge-new!important

拯救所有工具的是，没有一个能完整地保留领带。例如，ChatGPT将其从两个类别降为一个，同时保留了两个类别。这不再是平局; 现在无论顺序如何，他都会以2比1直接获胜。其他四个工具也各自做了类似的操作。.badge.badge-new.badge-new.promo-active .badge``.promo-active .badge

供应商前缀（测试7）

与第四场测试赛不同，第七场是干净利落的通过。所有工具都完全未动，也没有提供更新的无前缀替代品。这是CSS文件中唯一一个所有AI工具都被视为禁区，而不是现代化的部分。.card-description-webkit-box-webkit-line-clamp``-webkit-box-orient

​

​

寻找 VI：AI 工具如何处理 CSS 自定义属性

三个工具——Cursor、Claude 和 Copilot——在没有提示的情况下引入了 CSS 自定义属性。如果用得好，这真的是一次真正的升级。例如，原始的CSS硬编码在两个不同的地方，用于图像的边缘到边缘出血，悄然绑定在卡片的填充层上。光标和克劳德都注意到了这一点，并将两者联系在一起：-20px``20px

--- original/style.css
+++ refactors/cursor.css and refactors/claude.css
  .card-img {
-   width: calc(100% + 40px);
+   width: calc(100% + var(--card-padding) * 2);
    height: 200px;
-   margin: -20px -20px 0;
+   margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0;
  }

Copilot在同一文件的其他地方定义了等效变量，但在这里没有使用。不过这其实是矛盾，不是回归，因为硬编码的值仍然完全匹配原始值。这只是意味着Copilot的令牌系统实际上并没有带来它隐含承诺的单一真理来源优势。--spacing

除此之外，Copilot还添加了一条源代码中没有的规则：

--- original/style.css
+++ refactors/copilot.css
+ .card-wrapper {
+   display: flex;
+   justify-content: center;
+   padding: calc(var(--spacing) * 1.5);
+ }

这算是与原始渲染输出的回归，因为卡片默认是左对齐，变成了页面居中，这是没人要求的布局改动。它更像是未经请求的小小重构。

发现 VII：AI 工具引发了微妙的 CSS 样式回归

七个测试案例中没有一个是为捕捉这种回归而设计的。我是在浏览器里测试这五个演示版的，而不是读CSS时发现的。其中三个游戏的悬停“加入购物车”按钮感觉微妙不同，我一时说不出原因，直到回到原点。原始按钮悬停状态为：

.btn-primary:hover {
  background-color: #1557b0;
  opacity: 0.95;
}

ChatGPT、Gemini 和 Claude 完全取消了这句话：opacity

--- original/style.css
+++ refactors/chatgpt.css, refactors/gemini.css, refactors/claude.css
  .btn-primary:hover {
    background-color: #1557b0;
-   opacity: 0.95;
  }

只有光标和副驾驶保留了这个名字。这是一个单一且容易错过的特性，但丢失它意味着用户实际悬停在按钮上时少了一点反馈。

总体结论：哪个AI工具对CSS的重构效果最好？

这里有一个直接排名，直接基于上述结果。每个测试计2分（）、1（）、或0（）——克劳德测试2除外，该测试分为0.5分，以反映两个复合风险而非一个（见下方脚注）。

我还添加了测试套件外的三个发现（发现I.、发现VI.和发现VII.），每个最高分数为1分，这样单个发现就无法超过实际的检测结果：

	光标	副驾驶	ChatGPT	克洛德	双子座
测试1 – 悬停级联	0	0	0	0	0
测试2 – 堆叠上下文	2	1	1	0.5	1
测试3 – 近似重复的数值	2	2	2	0	0
测试4 – 州级覆盖	2	2	2	2	2
测试5 – 部分清理	2	2	0	2	0
测试6 – 选择器范围	1	1	1	1	1
测试7 – 供应商前缀	2	2	2	2	2
七项测试小计	11	10	8	7.5	6
寻找I。——冗余	1	1	1	1	1
寻找VI。——现代化（#1）	1	0	0.5	1	0.5
《寻找VII》。——悬浮不透明度	1	1	0	0	0
总计	14	12	9.5	9.5	7.5

(#1)光标和Claude通过引入自定义属性解决填充耦合问题，获得了满分（1.0分）。Copilot 在添加未使用变量并引入未请求的居中回归后得分为 0。ChatGPT和Gemini因保留自定义属性而获得了0.5的中性分数，因为选择不现代化并不等同于现代化得差。详情请参见上文“寻找VI”。.card-wrapper

正如计分表所示，Cursor获得第一名。它是唯一避免唯一回归的工具，除了其他所有助手一样，测试1只失败，也是仅有的两个保持悬浮不透明度声明的工具之一（发现VII）。

Copilot落后Cursor两分，失去了像ChatGPT和Gemini（测试2）那样的堆叠隔离，并在自定义属性实现上出现了挫折（Finding VI）。.card

ChatGPT和Claude整体上并列，尽管他们走了不同的道路。ChatGPT 在七个核心测试案例中表现略优（8 对 7.5），但 Claude 在 Finding VI 中有效利用自定义属性，使最终得分趋于平稳。

Gemini排名垫底，是唯一一位在七个测试案例中（测试1、测试3和测试5）中失败三项的助理。

一个明显的模式显现：前两名都属于了更具代理感的编辑编码助理，而非聊天界面。这个区分是有道理的。代理工具直接在原地编辑文件，而聊天工具则是根据提示重新生成整个样式表——这样更容易意外更改或删除现有属性。

然而，主要的结论并不是排名本身。而是每个AI工具都引入了一个足够简单的组件，能被一个CSS文件包围。

AI助手在常规清理任务中表现出色，比如删除死代码和删除冗余声明。然而，也有几部作品超出了他们的范围;大多数会添加未被要求的过渡，Copilot则将本不打算移动的卡牌布局置中。虽然AI可以加快CSS重构的速度，但开发者仍需审查输出，发现视觉回归，评估未请求的更改，并确保CSS级联继续按预期解决。

最终，这七个测试用例提供了一个实用且可重复使用的基准。由于提示词和输入样式表保持固定，该测试套件可以轻松评估未来的模型发布或新的AI编码助手，为我们提供了持续的进度衡量方式。