rel="stylesheet" 不可省略且 href 必须以 ./ 开头；CSS 应通过 JS import 交由构建工具处理，避免 @import 和内联；类名需带业务前缀或 BEM 保证作用域。
link 标签引入 CSS 时，rel="stylesheet" 不可省略
浏览器对 标签的解析依赖 rel 属性。省略 rel="stylesheet" 会导致样式不加载（尤其在严格模式或某些构建工具中），且部分 Linter（如 stylelint）会直接报错。
常见错误写法：
<link href="main.css">
正确写法必须显式声明：
<link rel="stylesheet" href="main.css">
- 即使使用
import或@import，最终产出的 HTML 仍需保证rel存在 - Webpack/Vite 等工具生成的
index.html通常自动补全，但手写或 SSR 场景下极易遗漏 - IE 和旧版 Safari 对缺失
rel更敏感，现代 Chrome 虽有容错，但不应依赖
CSS 文件路径应统一用相对路径，且以 ./ 开头
避免使用无前缀的路径（如 styles/main.css）或绝对路径（如 /styles/main.css），它们在子路由、部署子路径（如 /admin/）、或本地开发服务器代理场景下极易 404。
正确做法是所有 href 值以 ./ 显式开头：
<link rel="stylesheet" href="./css/main.css">
-
./表示相对于当前 HTML 文件位置，语义清晰、行为稳定 - 构建工具（如 Vite）默认支持
./解析；Webpack 需确保public目录外的资源走asset处理而非静态拷贝 - 若用
import './main.css'，则路径解析由 JS 模块系统控制，与 HTML 中的./逻辑一致，保持统一
避免在 HTML 中内联大量 style 或 @import
标签适合极小量、强耦合的组件级样式（如 loading 动画关键帧），但超过 20 行就该抽离；@import 在 CSS 文件中使用会阻塞并串行加载，破坏并行下载优势。
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
典型反例：
@import url('reset.css');<br>@import url('base.css');<br>@import url('theme.css');
这会导致三重网络延迟，且无法被 Webpack/Vite 的 CSS 提取插件优化。
- 构建项目中，CSS 应通过 JS 入口
import，交由打包器统一处理（提取、压缩、hash、tree-shaking） - 需要条件加载的样式（如暗色主题），用 JS 控制
切换，而非@import - HTML 中只保留一个
（主样式包），最多加一个media="print"的打印样式
命名与作用域：CSS 类名必须带明确业务前缀或 BEM 前缀
没有前缀的 .button、.header 极易在微前端、iframe 嵌入、或第三方 SDK 注入时冲突。纯靠 !important 或深度选择器（div div .button）治标不治本。
推荐方案：
.u-button { /* 工具类 */ }<br>.c-card { /* 组件类 */ }<br>.p-product-list { /* 页面类 */ }
- 前缀字母含义需团队对齐（如
c-= component，p-= page），并在 ESLint + stylelint 中配置规则校验 - BEM 命名（如
product-card__title--large）比前缀更细粒度，适合复杂组件，但需配套工具（如 postcss-bem）避免手误 - 不要依赖 CSS-in-JS 的“自动哈希”来解决作用域——它增加运行时开销，且不利于 SSR 和调试
实际维护中最容易被忽略的，是 HTML 中 的 rel 和路径一致性。这两处看似微小，却会在多环境部署、CI 构建、甚至缓存更新时引发静默失效——样式丢了，但控制台不报错，排查成本远高于预防成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
