article 中使用 label + input 选择器能精准作用，因其依赖 html 语义结构而非易断裂的类名路径，外链 css 可统一控制间距，无需冗余 class，体现结构驱动样式的稳定性与可维护性。
为什么放在
最常见原因是路径写错，或者CSS文件根本没被浏览器加载。打开开发者工具的 Network 标签页，筛选 css，看 styles.css 是否显示 404 或 pending 状态。
检查点清单：
-
href值是相对路径，必须相对于当前 HTML 文件位置——比如 HTML 在/pages/index.html，而 CSS 在/assets/style.css，那href就得写成../assets/style.css，不能写assets/style.css - 服务器默认不区分大小写，但 Linux 主机严格区分：
Styles.css≠styles.css - 确认文件编码为 UTF-8（无 BOM），尤其 Windows 上用记事本另存时容易带 BOM，导致 CSS 解析失败
- 不要在
<link>后加type="text/css"——HTML5 已废弃该属性，反而可能干扰某些旧环境解析
多个顺序混乱引发样式覆盖失效
CSS 层叠规则依赖声明顺序，<link> 的加载顺序直接决定最终生效样式。把重置样式（如 reset.css）放在最前，通用组件样式居中，页面特有样式放最后，是基本守则。
典型错误场景：
- 把
theme-dark.css放在base.css前面，结果暗色主题被基础样式覆盖 - 动态插入
<link>时没控制insertBefore位置，新样式插到已有样式前面，反而被压住 - Webpack/Vite 构建后生成的
chunk.css被自动注入，但没显式控制插入点，导致顺序不可控
建议：所有外链 CSS 都集中写在 开头，避免和 <meta>、<title></title> 交错；如需动态加载，用 document.head.appendChild(linkEl) 并确保 append 时机晚于基础样式已就绪。
class 命名不统一导致外链 CSS 失效或难维护
外链 CSS 生效的前提是 HTML 中的 class 名与选择器完全匹配。命名随意（比如混用 btn-primary 和 primary-btn）、缩写模糊（cont 是 container 还是 content？）、大小写混用（Header vs header），都会让样式“看起来写了却不起作用”。
实操底线：
- 全小写 + 短横线（
kebab-case）：强制统一为user-card、sidebar-nav，禁用驼峰或下划线 - 每个 class 表达单一语义：不用
big-red-box（描述外观），改用error-banner（表达用途） - 避免过度嵌套选择器：
.page-header .logo img比.logo-img更脆弱——一旦 DOM 结构微调，样式就断 - 用 BEM 规范约束层级：
card、card__title、card--highlighted，一眼可知关系与变体
HTML 语义化缺失让外链 CSS 变得低效甚至冗余
当满屏都是 <div class="section-1">、<code><div class="wrap-inner">，你不得不用一堆 class 去模拟语义，外链 CSS 就变成“给 div 加样式的字典”，而不是“给导航、主内容、页脚加样式的协议”。
<p>真正省力的做法是：</p>
<ul><li>用 <code><nav></nav> 替代 <div class="nav">，然后外链 CSS 里直接写 <code>nav { margin-bottom: 1rem; } —— 不用额外 class
<main></main> 包裹主体内容，CSS 里用 main > article 精准作用，不用靠 .content-area .post-list 这种易断裂的选择器<label for="email"></label> + <input id="email">，外链 CSS 可以统一设置 label + input 的间距，无需每个输入框都加 class外链 CSS 的威力，从来不是靠堆 class 实现的，而是靠 HTML 本身具备结构语义，CSS 才能干净、稳定、可预测地工作。否则，你写的每一条规则，都在为 HTML 的混乱买单。
