block不是容器而是功能单元；判断标准为能否脱离上下文独立存在且具明确语义名词命名，如user-avatar、search-form，禁用main-content等布局占位符及html标签名。

Block 不是容器，而是功能单元；写错 Block 名，往往意味着 DOM 结构或职责切分本身就有问题。

怎么判断一个元素该不该当 Block

关键就两点：它能否脱离当前上下文独立存在？有没有明确、可复用的功能语义？

• 删掉它，页面是否缺失某个完整功能（比如搜索、登录、商品卡片）？是 → 有可能是 Block
• 命名必须是名词，小写 + 短横线，如 user-avatar、search-form，不能是 top-banner（带位置）或 my-button（带归属）
• main-content、section-2、container 这类纯布局占位符，没行为逻辑，也不具备复用价值，不该作为 Block
• HTML 标签不是 Block：不要因为用了 div 就叫 div-block，Block 是抽象出来的功能模块，和标签无关

为什么 nav__item__dropdown 是错的

多级导航菜单里，nav 和 dropdown 必须是两个独立 Block。强行把下拉菜单写成 nav__submenu 或 nav__dropdown，本质是混淆了布局边界与交互边界。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• dropdown 有自己完整的交互逻辑（展开/收起、键盘导航、焦点管理），它不依赖 nav 存在
• 子级 dropdown 不是 nav 的嵌套部分，而是独立实例，应单独声明为 dropdown Block
• 跨 Block 命名（如 nav__item__dropdown）会破坏样式隔离——改 nav__item 的 padding，可能意外影响下拉区域的定位

card__title--large 合法，但 card__title__icon 不合法

BEM 只承认一层嵌套关系：block → element，不承认 element → sub-element。

• card__title--large 合法：修饰符作用于 card__title 自身，语义清晰
• card__title__icon 违反规则：图标若只是标题左侧装饰，应作为修饰符处理 —— card__title card__title--with-icon
• 若图标具备独立语义（如状态徽标、权限标识），它就该升格为新 Block：badge，再通过上下文组合使用
• SCSS 中一旦出现 &__item &__icon（中间带空格），等于生成后代选择器，破坏 BEM 隔离性

修饰符必须和对应 Block 或 Element 类名共存

单独用 card--featured 没问题，但 card__title--large 必须和 card__title 同时出现在 HTML 的 class 属性里。

• 否则语义断裂：CSS 里写 .card__title--large，但 HTML 没挂 card__title，开发者无法推断这个“大号标题”属于哪个结构上下文
• 多个修饰符要并列使用：button button--primary button--disabled ✅，button--primary--disabled ❌
• 修饰符值必须可预测：button--red 是危险信号，换品牌色就得全局搜替换；button--primary 才能映射到变量 $color-primary，支持主题切换

真正难的不是写对类名，而是每次加一个 class 前，先问一句：这个东西，能不能被另一个页面直接 copy-paste 过去还能用？如果答案是否定的，那它大概率不是 Block，或者还没被正确抽象出来。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！