结论：用bem但需避免机械套用，语义化、小写连字符、显式作用域比语法形式更重要；bem核心在于显性表达模块、组成部分与状态意图，而非单纯命名规则。
直接说结论：用 BEM，但别机械套用；语义化 + 小写连字符 + 显式作用域，这三点比任何命名法都关键。
BEM 不是“加下划线就完事”，而是结构意图显性化
BEM 的价值不在语法形式，而在强制你回答三个问题：这是什么独立模块（Block）？它里面哪些是不可拆的组成部分（Element）？当前状态或变体是什么（Modifier）？比如 .user-card 是 Block，.user-card__avatar 和 .user-card__name 是 Element，.user-card--compact 或 .user-card__name--truncated 是 Modifier。一旦写出 .user-card__delete-btn，就暴露了问题——delete-btn 是行为，不是结构角色，应归入 .user-card__control + --delete。
- Block 名必须可复用：
.homepage-hero-banner❌，.hero-banner✅，上下文靠组合（如.hero-banner--homepage）表达 - Element 名不能带逻辑动词：
__submit-handler❌，__form-action✅ - Modifier 必须对应明确状态：
--big❌（相对谁？），--expanded✅（有 DOM 属性或 JS 状态支撑）
类名必须脱离样式描述，只表达功能或内容
写 .red-text 或 .float-right 是在给未来埋雷——颜色改了、布局重构了，这个类名就失效甚至误导。真正要问的是：“这个元素在业务里叫什么？” “它承担什么职责？”
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅
.error-message、.search-input、.product-list-item - ❌
.bold-title、.lg-margin、.js-toggle（JS 钩子应统一用.js-前缀，但本身不参与样式） - 工具类（如
.u-text-center）可以存在，但和 BEM 类严格分离，不混用 —— 它们解决的是原子级样式复用，不是组件建模
嵌套选择器越少越好，类名越短越难维护
一个 .header .nav .list .item a 选择器，既脆弱又难 grep。BEM 的本质是用类名换选择器深度：把结构关系“编码”进名字里，而不是靠 DOM 层级匹配。
- 避免写
.sidebar ul li a，直接用.sidebar__link - 不要为“看起来简洁”缩写：
.btn✅（公认缩写），.hdr❌（.header才无歧义） - 响应式类名用断点前缀而非后缀：
.sm-hidden✅，.hidden-sm❌（读起来更符合直觉）
最难的不是记住 BEM 语法，而是每次写类名前停半秒：它会不会被挪到别的页面？它有没有可能变成另一个组件的一部分？如果答案是否定的，那这个类名大概率已经偏离了可维护性的核心——它正在绑定结构，而不是表达意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
