BEM类名如.card__title--large比.big-title更易定位修改，因其显式声明归属（card块）、元素（title）和变体（large），不依赖HTML结构或父级类，支持精准搜索与工具校验，杜绝隐式依赖和样式污染。
BEM 的逻辑一致性不是靠“更复杂”换来的，而是用显式结构替代隐式依赖，让样式归属、状态变更、组件复用全部可推断、可搜索、可验证。
为什么 .card__title--large 比 .big-title 更容易定位和修改
传统命名如 .big-title 把语义藏在单词里，但没人知道它属于哪个模块、是否被复用、会不会在其他页面意外生效。一旦页面结构微调（比如把标题从 <header> 移到 <section>），CSS 里靠 header .big-title 写的规则就直接失效。
-
.card__title--large一眼锁定归属：它是card这个 block 的一部分，title是它的 element，large是 modifier —— 不需要看 HTML 结构，也不依赖父级 class 是否存在 - 搜索
card__title就能精准命中所有相关样式，不会因为项目里还有.user__title或.modal__title而干扰结果 - JS 修改状态时只需增删
card__title--large，不用操心是否要同步 toggle 父容器的is-large类
__ 和 -- 不是随意定的符号，而是强制边界识别
双下划线 __ 和双短横 -- 的核心作用是视觉隔离 + 解析无歧义。人眼和工具都能立刻区分“块名”“元素名”“修饰符”，避免像 user-info 和 user__info 那样混淆。
-
__明确表示“这是块内部的组成部分”，禁止跨 block 使用（比如不能写header__nav-item，nav应该是独立 block） -
--表示“这是对当前 block 或 element 的覆盖/变体”，不是新增状态类，不参与条件组合（比如不写.btn--primary.is-disabled，而应写.btn--primary--disabled或单独定义.btn--disabled） - PostCSS 工具（如
postcss-bem）依赖这两个符号做 AST 解析；写成.card_title_large或.card-title-large，构建时可能直接丢弃 class
为什么 BEM 能让 CSS 文件真正“局部化”，哪怕不用 scoped 或 CSS Modules
传统方式靠父级 class 做作用域隔离（如 .user-page .card），但这种层级依赖会让样式行为变得不可预测：JS 切换父级 class、DOM 移动、甚至第三方库插入节点，都可能导致样式突然丢失或错位。
- BEM 所有 class 都是 flat 的：每个规则只匹配一个 class，权重恒为 10，不存在
.sidebar .nav .item:hover这种权重堆叠风险 - 组件复用时，只要 HTML 里带上对应 class（
card card--featured），CSS 就自动生效，不关心它在哪个路由、哪个 tab、哪个 iframe 里 - 即使全局搜索替换
card，也只会改 card 相关样式，不会误伤cart、car或其他含card字符串的变量名
真正容易被忽略的是：BEM 的一致性不是靠开发者自觉，而是靠工具链约束。一旦用了支持 BEM 的 linter 或 PostCSS 插件，.header__logo--dark 写成 .header-logo--dark 就会报错 —— 这种机械校验比任何文档或 Code Review 都更可靠。
