关键不是加权重，而是让权重可预期、可追踪；应优先用类名组合替代嵌套，避免盲目堆叠选择器，BEM需严格对应DOM结构，确保Block名真实存在、Element名角色明确、Modifier仅表状态。
怎么让自定义样式稳稳盖过第三方CSS
关键不是“加权重”，而是让权重可预期、可追踪。盲目堆叠选择器（比如写 .container .card .title span）只会让后续维护者抓狂，而且容易被更具体的框架规则反杀。
常见错误现象：.btn 改了颜色，但 .btn-primary 还是蓝的；或者 Vue 组件里 scoped 样式对弹窗无效——因为弹窗挂到了 body 下，根本不在组件作用域内。
- 优先用类名组合替代嵌套：写
.card-title--large，别写.card .title；前者权重固定（1个类），后者依赖结构且易断裂 - 遇到框架类名（如
.ant-btn），用同级组合提升可控性：.my-form .ant-btn比单纯.ant-btn更安全，又比div div div .ant-btn清晰 - 避免用标签+类组合去碰瓷框架，比如
button.ant-btn——很多库已用[class*="ant-btn"]或 JS 动态加类，标签名可能根本不存在
BEM命名到底该怎么落地才不翻车
BEM不是起个带双下划线的名字就完事。它本质是把“谁在管这个样式”编码进类名里，让别人一眼看懂作用域边界。
常见错误现象：写了 .header__nav-item，但实际 HTML 是 <nav class="header-nav"></nav>，导致类名和 DOM 脱节；或者在 .card__content 里又写 .card__content p，等于白写 BEM。
立即学习“前端免费学习笔记（深入）”；
- Block 名必须对应真实容器节点，比如
search对应<div class="search"></div>，不能是抽象概念 - Element 名要直接描述角色：
search__input、search__results，别用search__wrapper这种模糊词 - Modifier 只表达状态：
button--disabled、card--loading，别拿它干布局活（button--full-width是错的，该用工具类或独立布局规则） - 所有子元素都应有完整 BEM 类名，不省略 Block；
search__input不能简写成__input
link顺序失效时，第一反应不该是调换顺序
后加载的 CSS 文件没生效？先别急着改 <link> 位置。90% 的情况是文件压根没进浏览器样式表树（CSSOM）。
常见错误现象：把 theme-dark.css 放最后，但深色模式不触发；打开 Network 面板发现返回 404 或 CORS；或者用了 rel="preload" 导致样式延迟应用。
- 检查浏览器 DevTools 的 Network 面板，确认 CSS 文件状态码是 200，且 MIME 类型为
text/css - 避免在
<link>上滥用media属性（如media="print"），它会让样式表初始不参与渲染 - 构建工具（Vite/Webpack）可能合并或重排 CSS，原始
<link>顺序失效；此时应查打包产物里的实际注入顺序，而非源码 - 如果用了
@import，它的解析顺序独立于<link>，极易造成覆盖逻辑混乱，尽量不用
CSS Modules 和 Tailwind 下还要 BEM 吗
要，但目的变了：不是为了赢权重，而是为了语义锚点。Tailwind 的 text-lg font-bold text-gray-800 堆在一起，没人看得出这是标题还是按钮文字；CSS-in-JS 里一个 const title = css`...` 被多个组件引用，改一处就影响八方。
真正难处理的从来不是“怎么让样式生效”，而是“改这个类名会不会意外破坏其他地方”。BEM 提供的是可搜索、可定位的语义线索，比如搜 search__input--error 就能立刻定位到报错逻辑，而不是在几十个 input 相关样式里盲翻。
- Tailwind 项目中，用
@layer components+ BEM 类名组织：@layer components { .search__input { @apply px-3 py-2 border; } } - CSS-in-JS（如 Emotion）中，类名仍保持 BEM 结构，哪怕底层生成的是哈希名：
css`&.search__input { ... }` - 别指望工具链自动解决语义问题：PostCSS 插件能加前缀，但不能告诉你这个 Element 名该叫
__trigger还是__toggle
