monorepo中bem块名必须统一收口至shared/bem.ts导出常量（如block_user_card = 'user-card'），禁止硬编码；scss仅允许单层嵌套（.menu { &__item {} }），禁用后代选择器；第三方组件通过wrapper隔离，类名不强行改写；ci用postcss-bem-linter校验正则 /^a-z(__a-z)?(--a-z*)?$/。
Monorepo里BEM类名前缀怎么统一管理
不能靠人肉记忆或文档约定，必须把块名（block）的定义收口到一个可导入、可校验的位置。否则 packages/components 和 docs/play 里各自定义 user-card，拼写差个连字符或大小写，就导致样式失效且无报错。
实操建议：
- 在
packages/shared或根目录shared/下建bem.ts，导出所有 block 名常量，如export const BLOCK_USER_CARD = 'user-card' - 组件内部只用 import 引入，禁止硬编码字符串：
className={cn(BLOCK_USER_CARD + '__avatar', isLarge && BLOCK_USER_CARD + '--large')} - 配合 TypeScript 接口约束：定义
type BlockName = typeof BLOCK_USER_CARD | typeof BLOCK_BUTTON，让 IDE 在传参时提示可用值
SCSS中BEM嵌套如何避免破坏作用域隔离
SCSS 的 &__element 看似方便，但一旦写成 &__item &__icon（带空格），生成的选择器就是后代关系，等于主动放弃 BEM 的作用域保护能力。
常见错误现象：
- 修改
.menu的display，意外影响.menu__item__icon的定位逻辑 - 审查元素看到
.menu__item .menu__icon，说明已退化为普通 CSS 嵌套
实操建议：
- SCSS 文件只允许单层嵌套：
.menu { &__item {} &--horizontal {} } - 禁用
@at-root或&后加空格的写法；CI 中可用stylelint配置selector-max-compound-selectors: 1拦截多层选择器 - 深层视觉节点（如
menu__item__icon）必须重构：图标提为独立 blockicon，通过icon--in-menu表达上下文
第三方组件库类名和BEM怎么共存不打架
Ant Design、Element Plus 这些库的默认类名（如 .ant-btn）天然不符合 BEM，强行覆盖会增加维护成本，也违背“不改外链依赖”的工程原则。
使用场景：
- 封装一层 wrapper 组件，比如
<mybutton></mybutton>内部用ant-btn，但对外暴露my-button__inner类名供主题定制 - 全局覆盖仅限于主题变量（如
--ant-primary-color），而非重写.ant-btn__icon这类不存在的类名 - 工具类（如
.text-center）保留原样，但禁止在 BEM block 内部直接用 —— 应该转为my-block--centered
性能影响：CSS-in-JS 动态生成类名（如 styled-components 插值）会绕过 BEM 校验，导致审查元素看到 sc-a1b2c3，团队无法从类名反推结构。这类方案在 Monorepo 中应明确禁用。
CI阶段如何自动检测BEM命名违规
人工 Code Review 很难发现 card__title__icon 这种非法嵌套，或 btn--red 这种语义漂移的修饰符。必须靠机器扫描。
实操建议：
- 用
postcss-bem-linter或自定义 ESLint 插件，在pnpm run lint:css中检查类名正则：/^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--[a-z][a-z0-9-]*)?$/ - 禁止
__后紧跟数字或大写字母（card__2nd-title错）、禁止连续两个-（card--large--hover错） - 在
.cursor/rules/frontend/css.mdc中声明规则，让 Cursor 自动提示修复建议，比如把header-nav__logo改为header-nav__logo（注意这里只是示例，实际应确保符合规范）
BEM 在 Monorepo 中真正难的不是写法，而是 block 边界的划分共识 —— 同一个 UI 元素，A 团队认为是 user-card__avatar，B 团队坚持是独立 avatar block。这个分歧必须在 shared/bem.ts 的 PR Review 阶段解决，而不是等上线后才发现样式复用不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
