无需登录 数据私有 本地保存

CSS Modules类名生成器 - BEM风格

开发工具 生成器 CSS Modules 命名 生成
40
0
0
0
CSS Modules BEM 类名生成器

生成符合 BEM 规范的 CSS Modules 类名，支持 composes 组合样式

快速模板：
请输入有效的 CSS 类名（字母开头，可包含字母、数字、连字符、下划线）
按回车或点击按钮添加
📦 Elements（元素）
尚未添加元素。点击上方按钮添加 Block 的子元素。 

                

              

              

                

                  
                  

                

              

              

                

                  
                  

                

              

            

          

        

      

    


    
    

      

        常见问题与知识点
      

      

        

          
          

            

              BEM（Block Element Modifier）是由 Yandex 提出的一种 CSS 命名方法论。它将界面拆分为独立的块（Block）、元素（Element）和修饰符（Modifier）：


              • Block：独立的组件，如 .button、.card

              • Element：块的子元素，用双下划线 __ 连接，如 .button__icon

              • Modifier：块或元素的变体，用双连字符 -- 连接，如 .button--primary、.button__icon--large


              BEM 让 CSS 结构清晰、可维护，特别适合大型项目和组件化开发。
            

          

        

        

          
          

            

              CSS Modules 提供了局部作用域，天然避免了全局样式冲突。结合 BEM 命名后：


              • CSS Modules 保证类名在构建时被哈希化，不会与其他模块冲突

              • BEM 结构让开发者一眼看懂组件层级关系

              • 使用 composes 关键字，Modifier 类可以继承基础类的所有样式


              这种组合在 React、Vue 等组件化框架中非常流行，兼顾了可读性和隔离性。
            

          

        

        

          
          

            

              由于 BEM 使用 __ 和 --，在 JavaScript 中需用方括号语法访问：


              styles['button--primary'] 或 styles['button__icon--large']


              推荐使用 classnames 库动态组合：

              className={classNames(styles.button, styles['button--primary'])}


              如果启用了 composes，Modifier 已继承基础样式，只需使用 modifier 类名即可。
            

          

        

        

          
          

            

              composes 是 CSS Modules 的核心特性之一：


              • 避免类名拼接：Modifier 类自动获得基础类的样式，JSX 中无需写 styles.button + ' ' + styles['button--primary']

              • 减少 JS 逻辑：样式组合逻辑移到 CSS 层，组件代码更干净

              • 更好的类型支持：在 TypeScript 中减少 dynamic key 的使用

              • 构建优化：工具链可以更好地 tree-shake 未使用的样式
            

          

        

        

          
          

            

              • Block 名称：使用语义化的小写单词，如 search-form、user-avatar

              • 避免深层嵌套：尽量不要超过 Block__Element__SubElement 三层

              • Modifier 保持简洁：如 --active、--disabled、--size-large

              • Modifier 不独立使用：Modifier 始终与基础类配合使用（或通过 composes 继承）

              • 保持一致性：团队内统一命名风格，可配合 Stylelint 等工具约束
            

          

        

        

          
          

            

              完全可以。生成的 CSS 代码遵循 CSS Modules 标准语法，可直接保存为 *.module.css 文件。JSX 示例展示了推荐的使用方式（含 classnames 库）。建议根据实际项目的构建工具（Webpack、Vite、Next.js 等）和 CSS Modules 配置微调命名格式。所有主流框架和构建工具都原生支持 CSS Modules。
            

          

        

      

    

  


  






 🔧 相关工具