block 名必须语义完整，如 search-form 而非 search；element 类名用双下划线（search-form__input），modifier 用双短横（search-form__input--focused）；清空按钮应为独立 block clear-button；js 应用 classlist 直接操作完整类名，确保 modifier 原子性与可预测性。
搜索框的 Block 名必须语义完整，不能叫 search 或 input
叫 search-form 才对——它是一个可独立复用、带提交逻辑的完整功能模块。如果只写 search，后续出现 search-result 或 search-suggestion 时，语义就乱了：到底谁才是“块”？search-form 明确表达了“这是一个表单”，内部所有元素都属于它，不会和全局 search 类冲突。
search-form__input 是唯一合法的输入框类名，别加 focus 或 clear 后缀
聚焦态不是新元素，清空按钮也不是输入框的子部件——它们各自有独立语义边界：
-
search-form__input负责样式与基础行为（如 padding、font-size） - 聚焦状态用
search-form__input--focused（Modifier），由 JS 切换 class 控制 - 清空按钮是独立 Block：
clear-button，不是search-form__clear；否则它无法复用于过滤面板、表单重置等场景
错误写法：search-form__input-focused（缺双短横，被当成 element）、search-form__clear（绑架结构，清空按钮失去复用性）。
聚焦与清空的 Modifier 必须作用于 Block 或其直属 Element，不能跨层
常见误操作是给清空按钮加 search-form__clear--hidden，但 clear-button 本身已是 Block，它的状态该由自身修饰符控制：clear-button--hidden 或 clear-button--active。如果硬挂到 search-form 下，会导致：
- JS 需要同时维护两个 Block 的状态（
search-form和clear-button） - 样式覆盖风险：.search-form--has-value .clear-button--hidden 可能意外影响其他地方的
clear-button - DevTools 里找不到真实来源——因为类名语义断裂，调试时无法判断
--hidden是谁的状态
JS 切换 Modifier 时，别手动拼接字符串
用 classList.toggle() 直接操作完整类名，而不是拼 search-form__input + '--focused'：
const input = document.querySelector('.search-form__input');
input.addEventListener('focus', () => {
input.classList.add('search-form__input--focused');
});
input.addEventListener('blur', () => {
input.classList.remove('search-form__input--focused');
});
拼字符串容易漏双短横、大小写错位，也难做类型检查。更关键的是：BEM 的 Modifier 是原子状态，search-form__input--focused 和 search-form__input--disabled 互斥，不能共存——靠字符串拼接很难保证这种约束。
真正容易被忽略的点是：Modifier 名必须可预测、不可变。比如不要用 search-form__input--ios-focus，而应统一为 --focused；否则换 Android 端就得新增一堆平台相关类，BEM 的复用前提就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
