name: css-development-refactor description: 当需要将现有CSS从内联样式或工具类重构为语义化模式时使用此技能。触发词包括“重构CSS”、“提取样式”、“整合CSS”、“转换内联样式”、“清理样式”、“迁移到语义化”。转换为包含深色模式和测试的语义化类。

CSS开发：重构

概述

将现有CSS转换为语义化组件模式：

将内联样式提取为语义化类
将标记中的工具类整合为@apply组合
添加深色模式变体
添加测试覆盖
保留现有功能（行为中性的重构）

这是css-development的子技能 - 通常通过主技能自动调用。

适用场景

在以下情况使用：

将内联样式转换为语义化类
从标记中提取重复的工具类组合
从纯工具优先迁移到语义化组件
为现有CSS添加深色模式
清理分散或重复的CSS

模式参考

此技能按照主css-development技能中记录的模式进行重构：

语义化命名： .button-primary而非.btn-blue Tailwind组合： 使用@apply组合工具类 深色模式： 包含dark:变体 组合优先： 在创建新类之前重用现有类 测试覆盖： 静态CSS + 组件渲染测试

工作流程

调用此技能时，创建TodoWrite清单并系统地进行重构。

宣布使用

“我正在使用css-development:refactor技能，将CSS转换为语义化组件模式。”

创建TodoWrite清单

使用TodoWrite工具：

重构CSS：
- [ ] 分析现有CSS（识别需要重构的内容）
- [ ] 查找重复模式（寻找重复的工具类组合）
- [ ] 检查现有组件（查看模式是否已存在）
- [ ] 提取为语义化类（使用@apply创建新类）
- [ ] 包含深色模式（为新类添加dark:变体）
- [ ] 更新标记（用语义化名称替换内联/工具类）
- [ ] 添加测试（编写静态CSS和渲染测试）
- [ ] 文档化组件（添加使用注释）
- [ ] 验证行为未改变（确保视觉输出与原始一致）

重构清单详情

步骤1：分析现有CSS

操作： 阅读并理解需要重构的CSS

寻找：

组件文件中的内联样式
标记中重复的工具类组合
分散在多个文件中的CSS
缺少深色模式支持
缺乏语义化类名

需要重构的示例模式：

// 内联样式
<button style={{ background: 'indigo', padding: '1.5rem 2rem' }}>点击</button>

// 标记中重复的工具类
<button class="bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg text-white">
  点击我
</button>
<button class="bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg text-white">
  提交
</button>

// 非语义化CSS
.btn-blue {
  background: blue;
  padding: 12px 24px;
}

记录：

文件位置
模式频率（重复次数）
当前方法（内联、工具类、旧CSS）

分析完成后标记为已完成。

步骤2：查找重复模式

操作： 识别应成为语义化类的重复工具类组合

使用Grep工具搜索重复模式：

# 搜索常见的工具类组合
grep -r "bg-indigo-500 hover:bg-indigo-700 px-6 py-3" .
grep -r "rounded-lg shadow-md p-6" .

模式分类：

高频（5次以上出现）：必须提取
中频（2-4次出现）：可能提取
低频（1次出现）：保持原样或组合现有类

针对每个模式：

统计出现次数
列出文件位置
识别语义目的（这是按钮？卡片？徽章？）

模式分类完成后标记为已完成。

步骤3：检查现有组件

操作： 阅读styles/components.css查看模式是否已存在

创建新类之前，检查：

是否存在类似的类？
现有类是否可以组合？
现有类的变体是否适用？

示例：

找到的模式：bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg text-white
检查：.button-primary是否已存在？是
解决方案：使用.button-primary而非创建新类

每个模式的决策：

✅ 直接使用现有类
✅ 组合现有类
✅ 创建现有类的变体
⚠️ 创建新类（仅当没有现有解决方案时）

识别重用机会后标记为已完成。

步骤4：提取为语义化类

操作： 在styles/components.css中为需要提取的模式创建新的语义化类

针对每个被提取的模式：

选择语义化名称遵循现有模式
编写CSS类使用@apply
包含深色模式变体
添加文档注释

提取示例：

之前（在标记中）：

<button class="bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg text-white transition-all duration-200">
  点击我
</button>

之后（在components.css中）：

/* 主要按钮 - 主行动号召按钮，带悬停状态
   用法：<button className="button-primary">点击我</button> */
.button-primary {
  @apply bg-indigo-500 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-800;
  @apply px-6 py-3 rounded-lg text-white;
  @apply transition-all duration-200;
}

使用Edit工具将每个新类添加到components.css

所有语义化类创建完成后标记为已完成。

步骤5：包含深色模式

操作： 确保所有新/重构的类都有dark:变体

针对步骤4中创建的每个类：

为背景添加dark:变体
为文本颜色添加dark:变体
为边框添加dark:变体
在深色模式下测试（如果可能）

模式：

.component {
  @apply bg-white dark:bg-gray-800;
  @apply text-gray-900 dark:text-white;
  @apply border-gray-200 dark:border-gray-700;
}

深色模式覆盖添加完成后标记为已完成。

步骤6：更新标记

操作： 用语义化类名替换内联样式和工具类

针对使用旧模式的每个文件：

使用Read工具读取文件
使用Edit工具将旧模式替换为语义化类
验证替换是否正确

示例：

之前：

<button class="bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg text-white">
  点击我
</button>

之后：

<button class="button-primary">
  点击我
</button>

处理自定义类：

<!-- 如果有额外的自定义类，保留它们 -->
<button class="button-primary w-full mt-4">
  点击我
</button>

跟踪更改：

统计更新的文件数
统计替换的实例数
记录任何边缘情况

所有标记更新完成后标记为已完成。

步骤7：添加测试

操作： 为重构的组件添加测试覆盖

静态CSS测试在styles/__tests__/components.test.ts中：

it('应该有button-primary类', () => {
  const content = readFileSync('styles/components.css', 'utf-8');
  expect(content).toContain('.button-primary');
});

it('button-primary应该有深色模式变体', () => {
  const content = readFileSync('styles/components.css', 'utf-8');
  expect(content).toContain('dark:bg-indigo');
});

组件渲染测试（如果适用）：

it('重构后应用button-primary类', () => {
  render(<Button variant="primary">点击</Button>);
  expect(screen.getByRole('button')).toHaveClass('button-primary');
});

运行测试确保通过：

npm test

测试添加并通过后标记为已完成。

步骤8：文档化组件

操作： 确保所有重构的类都有文档

文档包括：

CSS中的注释解释目的
使用示例
迁移说明（如果有帮助）

示例：

/* 主要按钮 - 主CTA按钮（从内联工具类重构）
   用法：<button className="button-primary">点击我</button>
   替换：bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg text-white */
.button-primary {
  @apply bg-indigo-500 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-800;
  @apply px-6 py-3 rounded-lg text-white;
  @apply transition-all duration-200;
}

文档添加完成后标记为已完成。

步骤9：验证行为未改变

操作： 确保视觉输出和行为与原始一致

验证步骤：

运行测试（如果项目有）：
```
npm test
```
视觉检查（如果可能）：
- 启动开发服务器
- 检查重构的组件看起来是否相同
- 在浅色和深色模式下测试
- 测试交互状态（悬停、聚焦、激活）
检查回归：
- 比较前后截图（如果可用）
- 验证没有控制台错误
- 检查响应式行为

如果行为改变：

识别差异
修复语义化类以匹配原始行为
重新测试

必须保留行为 - 重构应该是视觉中性的

行为验证未改变后标记为已完成。

完成

所有清单项完成后：

生成重构工作摘要：

## CSS重构摘要

### 所做的更改

**创建的语义化类：**
- `.button-primary`（从5个文件中的8个实例提取）
- `.card`（从7个文件中的12个实例提取）
- `.badge-success`（从3个文件中的4个实例提取）

**修改的文件：**
- `styles/components.css`（+45行，3个新类）
- `components/Button.tsx`（用.button-primary替换工具类）
- `components/Card.tsx`（用.card替换工具类）
- `components/Badge.tsx`（用.badge-success替换工具类）
- `styles/__tests__/components.test.ts`（+12行，3个新测试）

**深色模式支持：**
- ✅ 所有重构的类包含dark:变体
- ✅ 在浅色和深色模式下测试

**测试覆盖：**
- ✅ 为所有新类添加静态CSS测试
- ✅ 更新组件渲染测试
- ✅ 所有测试通过

**行为验证：**
- ✅ 视觉输出与原始匹配
- ✅ 没有控制台错误
- ✅ 交互状态正常工作

### 影响

**代码减少：**
- 从标记中移除247行重复的工具类
- 添加45行语义化CSS
- 净减少：202行

**可维护性：**
- 样式集中在components.css中
- 更改现在在一个地方进行而不是多个地方
- 一致的组件外观

**深色模式：**
- 添加了之前不存在的深色模式支持
- 所有组件现在在浅色和深色主题中工作

建议后续步骤：
- 提交重构
- 为团队记录新模式
- 继续重构其他组件
提供验证： “您希望我使用css-development:validate技能验证重构后的CSS吗？”

摘要呈现后标记为已完成。