直接引入第三方css易冲突，因裸类名全局污染；bem通过block__element--modifier编码作用域，确保样式归属明确；第三方组件需用wrapper限定范围、禁用!important、避免标签选择器；构建层需校验类名规范，js拼接推荐工具函数。
为什么直接引入第三方 CSS 会炸锅
不是加载顺序没调好，而是 .button、.header 这类裸类名在全局作用域里天然冲突。浏览器不认“谁写的”，只按 specificity 和 !important 决定最终样式。你改了 Button.css，结果按钮颜色没变——大概率是 LegacyTheme.css 里一条 .button { color: red !important; } 挡住了。这不是顺序问题，是作用域失控。
block__element--modifier 不是格式，是作用域编码
BEM 把归属关系硬编码进类名：search-form__submit 和 modal__submit 天然不重叠，哪怕它们都引入同一份 CSS 文件，也不会互相覆盖。关键不在“名字长”，而在每个类名自带上下文：
-
search-form是真实存在的 block 容器节点，不是抽象概念 -
search-form__input必须直接属于该 block，不能脱离 context 单独使用 -
search-form__input--disabled只表达状态，不参与布局或业务逻辑
第三方组件（如 Ant Design）怎么隔离才不翻车
你没法改 .ant-btn 的类名，但能控制它的边界：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须包一层 wrapper block：
<div class="myapp-form-field--date"><datepicker></datepicker></div> - CSS 中用组合限定范围：
.myapp-form-field--date .ant-date-picker，别写.ant-btn全局覆盖 - 禁用
!important：它会截断 BEM 的 modifier 覆盖链，比如button--primary本该覆盖基础色，却被外部!important截断 - 避免
div .ant-btn这类标签+类组合，很多库动态加类或用属性选择器，标签名不可靠
多人协作时最容易忽略的其实是结构校验
BEM 类名本身不唯一，两个模块都写 user-card__avatar，后定义的规则照样覆盖前一个。真正起作用的是构建层约束：
- 用
stylelint-selector-bem-pattern拦截裸名（如.btn）、单下划线（.card_title）、缺 block 前缀（.button--primary） - 配置
postcss-bem-linter白名单，限定合法 block 名（如['search-form', 'product-card']） - JS 拼
className别手写：`button__icon ${hasIcon ? 'button--loading' : ''}`容易漏空格、错连字符；推荐封装cn('icon', 'loading')或用clsx
最常被跳过的动作，是每次写 class 前没问一句：“这个样式属于谁？它会不会在别的上下文里意外生效？”——这句话比所有工具配置都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
