小型项目应简化BEM，保留块级隔离、元素归属明确、状态可识别三大核心：用单连字符替代双下划线（如.card-title），修饰符仍用--（如.card--expanded），禁用无上下文类名，scoped样式下仍需语义化命名以避免歧义。
小型项目里要不要用 BEM？
不用全量套用，但必须保留核心约束：块级隔离 + 元素归属明确 + 状态可识别。小项目没那么多组件复用和协作压力，硬套完整 BEM（比如 .header__nav__item--active 这种三层嵌套）反而增加认知负担，还容易写错。
怎么简化 BEM 的命名结构？
删掉冗余层级，只保留「块-元素」或「块-修饰符」两级，避免 __ 套 __。关键不是缩写，而是让每个 class 都能回答三个问题：它属于哪个功能模块？是不是模块内部的子部分？有没有特殊状态？
-
.card是块，.card-title和.card-body是元素 —— 用单连字符-替代__，语义足够清晰，且兼容 CSS 自定义属性和 JS className 操作 -
.card--expanded表示状态，.card--loading表示行为态，修饰符仍用--，不妥协 - 禁止出现
.title、.active这类无上下文 class，哪怕只用一次也得带上块前缀
scoped 样式下 BEM-like 还有必要吗？
有必要，而且更关键。Vue 的 <style scoped> 或 React 的 CSS Modules 只解决选择器作用域，不解决 class 命名歧义。你在 <Card> 组件里写了 .icon，另一个 <Button> 也写 .icon，编译后可能变成 .icon[data-v-xxx] 和 .icon[data-v-yyy] —— 看似隔离，但开发者读代码时完全无法判断这两个 .icon 是否同构、能否复用、是否该合并。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- scoped 下仍建议写
.card-icon和.button-icon，靠命名区分语义，而非仅靠属性选择器 - 如果用了
/deep/或::v-deep覆盖第三方库样式，.el-button--primary这类原始 BEM 名字反而更安全，别擅自改成.btn--primary
什么时候该放弃 BEM-like，直接用语义化单 class？
当某个样式只用于一次性布局片段，且不涉及状态切换、不被 JS 控制、也不需要被其他组件复用时，可以退回到纯语义 class，比如 .section-intro、.grid-3col。但注意：这类名字仍需体现功能意图，不能是 .wrap、.box、.container 这种无信息量的泛称。
立即学习“前端免费学习笔记（深入）”；
-
.hero-banner✅ —— 明确是首页顶部横幅区块 -
.banner❌ —— 不知道是哪个 banner，也不知道在什么上下文中 - 即使不用
__或--，也要保持「名词+场景/用途」结构，比如.form-error-message比.error更可靠
class 时就决定它属于谁、代表什么、会不会变——这个意识比语法本身重要得多。 
