使用Stylelint处理遗留项目：如何将CSS类名从Camel Case转为Kebab Case？

以下是几种落地性强的转换方案，覆盖批量处理、自动修复和关联文件同步修改：

1. 用Node脚本批量处理CSS文件 #

写一个简单的Node脚本，遍历指定目录下的CSS文件，自动将驼峰类名转为短横线式：

const fs = require('fs');
const path = require('path');

// 驼峰转短横线的工具函数
function camelToKebab(str) {
  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
}

// 处理单个CSS文件
function processCssFile(filePath) {
  const content = fs.readFileSync(filePath, 'utf8');
  // 匹配所有类选择器（.开头，后跟驼峰命名）
  const processedContent = content.replace(/\.[a-z][A-Za-z0-9]+/g, (match) => {
    const className = match.slice(1); // 去掉开头的.
    return `.${camelToKebab(className)}`;
  });
  fs.writeFileSync(filePath, processedContent, 'utf8');
  console.log(`处理完成：${filePath}`);
}

// 遍历目录下的所有CSS文件
function traverseDir(dir) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) {
      traverseDir(fullPath);
    } else if (path.extname(file) === '.css') {
      processCssFile(fullPath);
    }
  });
}

// 替换为你的CSS文件根目录
traverseDir('./src/styles');

运行脚本前记得备份文件，避免意外。

2. IDE正则批量替换（快速手动处理） #

以VS Code为例，用正则查找替换完成转换：

• 打开查找替换面板（Ctrl+F），勾选「正则表达式」按钮
• 查找内容：(\.[a-z]+)([A-Z])
• 替换内容：$1-\l$2
• 点击「全部替换」，重复几次直到没有匹配项（一次替换只能处理一个大写字母，多层驼峰需要多跑几次）

如果要同步处理HTML/JS里的类名引用：

• 在HTML中，查找内容改为class="([^"]+)"，用替换函数将捕获到的类名转成短横线格式
• 在JS中，查找className="([^"]+)"或className='([^']+)'，同样用替换函数处理

3. Stylelint自动修复配合规则强制 #

如果你已经在用Stylelint，可以通过配置规则实现自动修复：

1. 在.stylelintrc中添加类名格式规则：

{
  "rules": {
    "selector-class-pattern": "^[a-z][a-z0-9-]*$"
  }
}

2. 运行Stylelint修复命令：

stylelint --fix "src/**/*.css"

注意：若自动修复不生效，可以结合方案1的脚本补充处理。

4. 关联文件同步修改要点 #

CSS类名修改后，必须同步更新HTML、JSX、JS中对应的类名引用：

• 对于HTML文件，用同样的驼峰转短横线正则批量替换class属性值
• 对于React的JSX文件，替换className属性中的驼峰类名
• 对于原生JS中的DOM操作（比如document.querySelector('.camelCaseClass')），也要同步替换选择器字符串

内容的提问来源于stack exchange，提问作者power-cut