如何从HTML生成带类名的空样式模板？支持BEM风格更佳

一、编辑器插件（最便捷） #

VS Code 可选插件 #

• CSS Peek：选中JSX中的类名，右键即可生成对应嵌套SCSS结构，自动匹配DOM层级，BEM类名（如block__element、block--modifier）也能直接识别处理，还支持反向跳转查看样式。
• SCSS Generator：粘贴JSX代码后，一键导出嵌套SCSS或扁平纯CSS模板，专门适配类名层级，BEM命名规则完全兼容。

二、自定义代码片段 #

在VS Code中配置代码片段，快速生成基础结构（适合简单场景）：
打开用户代码片段设置，新建SCSS片段，粘贴以下内容：

{
  "JSX 转 SCSS 结构": {
    "prefix": "jsx2scss",
    "body": [
      "${1:.parent} {",
      "  ${2:.child} {",
      "    ${3:.grandchild} {",
      "    }",
      "  }",
      "}"
    ],
    "description": "快速生成嵌套SCSS结构"
  }
}

使用时输入jsx2scss即可快速生成层级结构，手动替换为JSX中的类名，BEM类名直接填入占位符即可。

三、本地脚本（自定义程度高） #

用Node.js写简单脚本，批量解析JSX生成样式模板：

const fs = require('fs');

// 读取JSX文件内容
const jsxContent = fs.readFileSync('./your-component.jsx', 'utf8');

// 提取所有className
const classMatches = jsxContent.match(/className="([^"]+)"/g) || [];
const classNames = classMatches.map(match => match.replace(/className="|"/g, ''));

// 计算DOM层级（基于缩进判断，可根据实际JSX格式调整）
const indentRegex = /^(\s*)<div/gm;
const indents = [];
let indentMatch;
while ((indentMatch = indentRegex.exec(jsxContent)) !== null) {
  indents.push(indentMatch[1].length);
}

// 生成嵌套SCSS
let scss = '';
let prevIndent = -1;
classNames.forEach((className, idx) => {
  const currentIndent = indents[idx];
  const indentLevel = Math.floor(currentIndent / 2); // 假设缩进为2空格

  // 处理闭合括号
  while (indentLevel < prevIndent) {
    scss += `${'  '.repeat(prevIndent - 1)}}\n`;
    prevIndent--;
  }

  // 添加当前类选择器
  scss += `${'  '.repeat(indentLevel)}.${className} {\n`;
  prevIndent = indentLevel + 1;
});

// 闭合剩余括号
while (prevIndent > 0) {
  scss += `${'  '.repeat(prevIndent - 1)}}\n`;
  prevIndent--;
}

// 写入SCSS文件
fs.writeFileSync('./output.scss', scss);

这个脚本能根据JSX的缩进自动识别DOM层级，生成完美嵌套的SCSS，BEM类名直接保留原命名结构。

四、BEM类名适配 #

所有上述方案都支持BEM风格类名，生成的SCSS可以用嵌套写法简化BEM代码：

.chat {
  &__header {
  }
  &__body {
  }
  &--dark {
  }
}

内容的提问来源于stack exchange，提问作者mpower