正确拼出 block__element--modifier,统一规范化为 kebab-case,附 HTML 与 SCSS 嵌套示例,浏览器本地运算
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
先填一个块名开始。
BEM 读作 block__element--modifier:元素前用双下划线,修饰符前用双连字符。每一段都会规范化为 kebab-case。
这个工具能做什么
面向前端 CSS 的免费 BEM 类名生成器。填一个块 Block、可选的元素 Element 和一个或多个修饰符 Modifier,工具按「块元素修饰符」约定拼出 类名:元素前用双下划线,每个修饰符前用双连字符,于是 card 加 title 加 active 得到 card__title--active。每一段都会规范化为 kebab-case, 也就是说 cardTitle、Card Title 和 CARD_TITLE 都落到同一个 card-title 段上,样式表保持一致。加多个修饰符时会逐行输出,一个基础类加每个变体 各一行,正是你写在 class 属性里的样子。工具还给出可直接粘贴的 HTML 片段,以及用 & 父选择器写的 SCSS 嵌套块,贴进 partial 即可。全部在 浏览器里运算,一键复制,分享链接能还原你填的块、元素和修饰符。
工具细节
- 输入
- 文本
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
BEM 类名生成器 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
让一个团队的 CSS 类名保持一致
三个工程师改同一个组件库,各有偏好的写法。一个写 cardTitle, 一个写 card_title,还有一个写 CardTitle。把每个名字过一遍生成器, 它们都落到 card__title,于是 pull request 的 diff 不会只因风格 来回抖。kebab-case 规范化在这里是沉默的执法者:评审里没人再为 写法争论,因为工具已经替大家定好了。
把快速原型变成 BEM 样式表
你画了一张卡片,有标题、图片和页脚,还有一个 featured 变体。把 card 列为块,加上每个元素,再把 featured 加为修饰符。把类名列表 贴进标记,把 SCSS 嵌套块贴进 partial。一分钟内,这个随手画的 原型就有了规整的 BEM 结构,而不是一堆零散的 .title、.footer, 那些类迟早会和下一个组件撞名。
给新来的前端讲清楚 BEM
抽象地讲双下划线和双连字符的区别,往往记不住。把工具递给新人, 让他填 card、title 和 active,当 card__title--active 连同对应的 SCSS 一起出现时,规则当场就通了。分享链接让你在聊天里发一个做好 的示例,对方打开就和你搭的一模一样,比一段讲约定的文字管用。
为交互组件批量生成状态修饰符
一个菜单项有好几种状态:active、disabled、hovered、current。块和 元素填一次,把四种状态作为修饰符每行一个列出。一次就拿到 menu__item 加四个变体类,直接放进组件的类名逻辑和样式表,不用 一个个手敲,也不会因为少打一个连字符让选择器悄悄失效。
常见踩坑
把元素嵌进元素里,比如 card__body__title。BEM 的元素永远扁平地挂在块下,所以即便标题在视觉上位于 body 容器内,正确的名字也是 card__title。保持一个块、一个双下划线,然后是元素名。
修饰符用单连字符,写成 card-active 而不是 card--active。单个连字符会被读成 kebab-case 名字的一部分,于是 card-active 看起来像一个叫 card-active 的块,而不是 card 上的修饰符。工具总是插入双分隔符,避免这种情况。
让修饰符自己承载语义,比如一个全局的 .active 类。BEM 修饰符应当有作用域,写成 card__title--active,而不是一个裸的 .active 渗到无关组件上、逼你用优先级技巧去覆盖。修饰符要始终挂在它的块或元素上。
隐私说明
整个生成器都是在浏览器标签页里运行的纯 JavaScript。你填的块、元素和 修饰符名从不发往服务器,也不会被记录。唯一可能离开本机的是可选的 分享链接,它把三个字段编码进 URL 查询字符串,队友打开就看到同样的 类名。类名并不敏感,所以这是安全的,但如果你不想把它们放进网址,用 复制按钮粘贴文本即可,不必分享链接。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。