直接写 .button 会引发全局样式污染，因css无天然作用域，所有同名类规则叠加生效；bem通过block__element--modifier命名声明归属、角色与状态，构建局部命名空间，但隔离效果取决于是否严格只用该唯一类名注入样式。
为什么直接写 .button 就等于主动放行全局污染
浏览器根本不区分“这是谁写的样式”，只看选择器是否匹配 DOM。只要页面里存在 <button class="button"></button>，所有定义过 .button 的 CSS 规则（不管来自哪个文件、哪个团队、哪个第三方库）都会叠加生效。常见现象包括：margin 突然变大、color 被改掉、:hover 在不该触发的地方触发——问题根源不是代码写错，而是类名撞车后权重或加载顺序起了作用。
block__element--modifier 不是加长名字，是声明作用域边界
一个合规的 BEM 类名，本身就在回答三个问题：它属于谁？它是什么角色？它现在什么状态？这三重信息合起来，构成事实上的“局部命名空间”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
search-form是 block，必须对应一个真实 DOM 容器（如<form class="search-form"></form>），不能只在 CSS 里写规则却不加这个类 -
search-form__input中的__input不是通用“输入框”，它只存在于search-form内部；删掉父级类，这个样式就失效——这才是隔离 -
search-form--compact是 modifier，控制整块行为，不是给某个子元素单独加样式；禁止写search-form__input--disabled，状态应由 block 统一管理 - 所有样式定义必须只通过
search-form__input这个唯一入口，禁用.search-form .input这类上下文选择器——那等于凿穿沙箱墙
和第三方组件共存时，block 前缀要当“围栏”用
BEM 管不了别人家的类名，但能守住自己的影响范围。关键不是“改它”，而是“围住它”。
- 给第三方组件包一层 wrapper：
<div class="form-field--date"><el-date-picker></el-date-picker></div>，然后所有定制样式都限定在.form-field--date .el-input__inner - 第三方不支持
classNamePrefix？用属性选择器兜底：.myapp-ui [class^="ant-"]，但必须加外层限定，避免误伤（比如不能写成[class^="ant-"]） - 动态插入到
document.body的弹窗、Tooltip，默认逃出你的 block 容器——必须显式传container: '.myapp-ui'或用 portal 指向带 block 类的容器
真正麻烦的不是命名本身，是有人写 .header .logo 就等于开了后门
BEM 的隔离效果不取决于你写了多少 __ 和 --，而取决于所有相关样式是否只通过这个唯一类名注入。只要某处还写着 .search-form .input，沙箱就已经漏了。工具链必须强制落地：stylelint-selector-bem-pattern 校验类名格式，VS Code 安装 BEM Helper 插件自动补全，CI 中拦截后代选择器写法——否则“看着像 BEM”的假规范撑不过两个迭代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
