前端命名规范之 BEM 入门与实践让 CSS 类名更有语义、更易维护 —— BEM 命名方法论详解 为什么需要 BEM在传统 CSS 开发中随着项目体积增大类名冲突、样式覆盖、维护困难等问题逐渐暴露。BEMBlock Element Modifier应运而生它是一种组件化的 CSS 命名方法论旨在提高代码的可读性、可维护性和可扩展性。 BEM 核心概念BEM 将 UI 划分为三个层级层级含义示例Block独立、可复用的组件容器.header,.menu,.buttonElementBlock 的子元素依赖于 Block.menu__item,.button__iconModifier改变 Block / Element 的外观或状态.button--primary,.menu__item--active✍️ 命名语法规则BEM 使用以下命名约定Block.blockElement.block__element双下划线__Modifier.block--modifier或.block__element--modifier双连字符--✅ 正确示例!-- Block: search-form --formclasssearch-form!-- Element --inputclasssearch-form__input/!-- Element Modifier --buttonclasssearch-form__button search-form__button--primary搜索/button/form.search-form{/* ... */}.search-form__input{/* ... */}.search-form__button{/* ... */}.search-form__button--primary{/* ... */} 常见变体写法在实际项目中BEM 也有几种常见的变体风格可根据团队规范选择风格示例经典 BEM双下划线 双连字符.block__element--modifier下划线风格.block_element_modifier驼峰组合风格.block__element-modifier 推荐使用经典双下划线 双连字符视觉区分度最高IDE 智能提示也更友好。 多场景实战从文本到导航BEM 怎么拆BEM 的核心不是“长得像卡片”而是逻辑拆分。不管外观是文字、图片还是按钮都按“独立容器Block→ 组成部分Element→ 状态变化Modifier”三步走。场景一文章内容块纯文本 / 富文本样式articleclassarticleh1classarticle__title深入理解 BEM 规范/h1divclassarticle__metaspanclassarticle__author作者张三/spanspanclassarticle__date2026-07-02/span/divdivclassarticle__bodypclassarticle__paragraph article__paragraph--first首段特殊缩进不需要首行缩进。/ppclassarticle__paragraph普通正文段落字体大小 16px行高 1.8。/pblockquoteclassarticle__quote引用文本这里是引用的内容。/blockquotepclassarticle__paragraph article__paragraph--highlight这段文字有高亮背景色Modifier 控制样式变化。/p/div/article.article{max-width:800px;padding:20px;background:#fafafa;}.article__title{font-size:28px;font-weight:bold;color:#333;}.article__meta{color:#999;font-size:14px;border-bottom:1px solid #eee;padding-bottom:10px;}.article__paragraph{font-size:16px;line-height:1.8;color:#444;}.article__paragraph--first{text-indent:2em;}.article__paragraph--highlight{background:#fff3cd;padding:8px 12px;border-radius:4px;}.article__quote{border-left:4px solid #409EFF;padding-left:16px;color:#666;font-style:italic;}✅ 即使是纯文本article__paragraph--highlight也是 Modifier因为它只负责“改变这一段的外观”。场景二导航菜单结构 激活状态navclassnavulclassnav__listliclassnav__itemaclassnav__link nav__link--active首页/a/liliclassnav__itemaclassnav__link产品中心/a/liliclassnav__itemaclassnav__link nav__link--disabled关于我们暂不可用/a/li/ul/nav.nav{background:#2c3e50;padding:0 20px;}.nav__list{list-style:none;display:flex;gap:0;margin:0;padding:0;}.nav__item{padding:12px 20px;}.nav__link{color:#fff;text-decoration:none;font-size:16px;padding:4px 0;border-bottom:2px solid transparent;transition:0.3s;}.nav__link--active{border-bottom-color:#409EFF;color:#409EFF;}.nav__link--disabled{color:#666;cursor:not-allowed;pointer-events:none;}场景三用户信息标签带 VIP 角标divclassuser-cardimgclassuser-card__avatarsrcavatar.jpgalt头像/divclassuser-card__infospanclassuser-card__name王小二/spanspanclassuser-card__tag user-card__tag--vipVIP/spanspanclassuser-card__tag user-card__tag--new新用户/span/divbuttonclassuser-card__btn user-card__btn--follow 关注/button/div.user-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #e4e7ed;border-radius:8px;}.user-card__avatar{width:48px;height:48px;border-radius:50%;}.user-card__name{font-size:16px;font-weight:600;}.user-card__tag{font-size:12px;padding:2px 8px;border-radius:12px;background:#f0f0f0;color:#666;}.user-card__tag--vip{background:#ffd700;color:#b8860b;}.user-card__tag--new{background:#409EFF;color:#fff;}.user-card__btn--follow{background:#409EFF;color:#fff;border:none;padding:6px 16px;border-radius:4px;cursor:pointer;} 拆解心法记住这三问无论遇到什么 UI问自己 3 个问题谁是 Block→ 独立、可复用的最外层容器如.article、.nav、.user-card。谁是 Element→ 属于这个容器、不能独立存在的子部分如__title、__link、__avatar。谁是 Modifier→ 用来描述“变体”或“状态”的如--active、--highlight、--vip。⚠️关键原则Modifier 只改样式颜色、大小、显隐不改 HTML 结构。文本也一样加粗、变色、缩进统统用 Modifier 搞定。⚠️ 使用注意事项Block 必须独立Block 不应依赖父级或全局样式。Element 必须隶属于 Block不能脱离 Block 单独使用。Modifier 用于变化Modifier 只负责样式差异不改变结构。避免过度嵌套BEM 不关注 DOM 层级只关注逻辑层级。不要使用标签选择器一律用类名保证可复用性。 适用场景与不适用场景✅ 适用场景❌ 不适用场景大型多人协作项目简单的静态页面组件化开发Vue / React快速原型开发长期维护的中后台系统纯内容型官网少量样式 总结BEM 的核心思想是Block → Element → Modifier命名格式统一为block__element--modifier优势语义清晰、样式隔离、便于维护推荐结合SCSS / Less使用通过嵌套语法简化编写 BEM 不是银弹但它是一套成熟、轻量、无侵入的 CSS 组织方案。掌握它是迈向工程化 CSS的重要一步。 相关扩展BEM 官方文档CSS Modules / Tailwind CSS 对比分析大型项目 CSS 架构设计最佳实践