后引入的CSS没生效并非顺序错误，而是文件未进入浏览器样式表树；需检查Network面板确认theme.css返回200且Content-Type为text/css，常见原因包括rel="preload"延迟应用、media="print"初始不渲染、构建工具导致物理与逻辑顺序不一致。
为什么后引入的CSS没生效
不是顺序错了，而是文件根本没进浏览器样式表树。打开 DevTools 的 Network 面板，确认 theme.css 返回状态码是 200，且 Content-Type 是 text/css。常见翻车点：rel="preload" 会让样式延迟应用；media="print" 会让样式初始不参与渲染；构建工具（如 Vite）可能把 import 提前或合并，导致物理顺序和逻辑顺序不一致。
link 标签顺序怎么排才靠谱
顺序不是“越靠后越强”，而是“谁最后解析完、权重相当，谁赢”。关键在于分层：基础重置（reset.css）必须最前；组件库（ant-design.css）紧随其后；项目变量/工具类（utils.css）放中间；页面专属样式（home.module.css）放最后。但要注意：#header .nav a 权重高于 .nav a，哪怕后者在后面加载也盖不住前者。
- 用 DevTools 的 Computed 面板点开元素，看哪条规则被划掉、为什么（是 specificity 不够？还是被
:where()降权了？） - 避免在
<link>上写!important—— 它不生效，!important只在 CSS 声明里有效 - 别用
@import加关键样式，它阻塞解析，且优先级只取决于它在当前文件里的位置，不是被导入文件的位置
第三方库样式总把你改崩怎么办
不是你权重不够，是框架用了 ID 或内联 style。比如 Ant Design 的 .ant-btn 被 JS 动态加类，写 button.ant-btn 可能根本匹配不到；Vue 的 <style scoped> 对挂到 body 下的弹窗无效——它根本不在组件 DOM 树里。
- 对挂出组件树的元素（如
Modal、Tooltip），用同级组合提升可控性：.my-page .ant-modal比单纯.ant-modal更稳 - 用
:where(.ant-btn) { color: red }降权覆盖，避免被更高 specificity 反杀 - 纯静态页无法用模块化时，给根容器加
data-scope="admin"，所有规则前置：[data-scope="admin"] .btn
BEM 名字起得再规范也没用的几种情况
BEM 不是拼名字游戏，是把“谁管这个样式”编码进类名。起名再标准，DOM 结构对不上就白搭。
立即学习“前端免费学习笔记（深入）”；
-
header__nav-item对应的 HTML 必须是<nav class="header__nav-item">，不能是<div class="header-nav"> -
card__content p这种写法等于放弃 BEM，子元素必须带完整 Block 名：card__content-text -
button--full-width是错的，Modifier 只表达状态（button--disabled），布局该用工具类或独立规则
真正难的不是写对，是让所有人遵守同一套映射关系——Block 名必须真实存在、Element 名必须角色明确、Modifier 必须只表状态。一旦脱节，BEM 就从防冲突工具变成新冲突源。
