rel="stylesheet" 不可省略且 href 必须以 ./ 开头；CSS 应通过 JS import 交由构建工具处理，避免 @import 和内联；类名需带业务前缀或 BEM 保证作用域。

link 标签引入 CSS 时，rel="stylesheet" 不可省略

浏览器对 标签的解析依赖 rel 属性。省略 rel="stylesheet" 会导致样式不加载（尤其在严格模式或某些构建工具中），且部分 Linter（如 stylelint）会直接报错。

常见错误写法：

• 即使使用 import 或 @import，最终产出的 HTML 仍需保证 rel 存在
• Webpack/Vite 等工具生成的 index.html 通常自动补全，但手写或 SSR 场景下极易遗漏
• IE 和旧版 Safari 对缺失 rel 更敏感，现代 Chrome 虽有容错，但不应依赖

CSS 文件路径应统一用相对路径，且以 ./ 开头

避免使用无前缀的路径（如 styles/main.css）或绝对路径（如 /styles/main.css），它们在子路由、部署子路径（如 /admin/）、或本地开发服务器代理场景下极易 404。

正确做法是所有 href 值以 ./ 显式开头：

• ./ 表示相对于当前 HTML 文件位置，语义清晰、行为稳定
• 构建工具（如 Vite）默认支持 ./ 解析；Webpack 需确保 public 目录外的资源走 asset 处理而非静态拷贝
• 若用 import './main.css'，则路径解析由 JS 模块系统控制，与 HTML 中的 ./ 逻辑一致，保持统一

避免在 HTML 中内联大量 style 或 @import

标签适合极小量、强耦合的组件级样式（如 loading 动画关键帧），但超过 20 行就该抽离；@import 在 CSS 文件中使用会阻塞并串行加载，破坏并行下载优势。

典型反例：

@import url('reset.css');
@import url('base.css');
@import url('theme.css');

• 构建项目中，CSS 应通过 JS 入口 import，交由打包器统一处理（提取、压缩、hash、tree-shaking）
• 需要条件加载的样式（如暗色主题），用 JS 控制 切换，而非 @import
• HTML 中只保留一个 （主样式包），最多加一个 media="print" 的打印样式

命名与作用域：CSS 类名必须带明确业务前缀或 BEM 前缀

没有前缀的 .button、.header 极易在微前端、iframe 嵌入、或第三方 SDK 注入时冲突。纯靠 !important 或深度选择器（div div .button）治标不治本。

推荐方案：

.u-button { /* 工具类 */ }
.c-card { /* 组件类 */ }
.p-product-list { /* 页面类 */ }

• 前缀字母含义需团队对齐（如 c- = component，p- = page），并在 ESLint + stylelint 中配置规则校验
• BEM 命名（如 product-card__title--large）比前缀更细粒度，适合复杂组件，但需配套工具（如 postcss-bem）避免手误
• 不要依赖 CSS-in-JS 的“自动哈希”来解决作用域——它增加运行时开销，且不利于 SSR 和调试

实际维护中最容易被忽略的，是 HTML 中 的 rel 和路径一致性。这两处看似微小，却会在多环境部署、CI 构建、甚至缓存更新时引发静默失效——样式丢了，但控制台不报错，排查成本远高于预防成本。