link 标签必须使用 rel="stylesheet" 且 href 指向合法 CSS 路径，禁止协议绝对 URL；CSS 文件需按 base/components/layouts/pages 分层组织，禁止跨层依赖与非法 @import；须用 lint 工具校验路径、rel 属性及命名规范。
link 标签必须用 rel="stylesheet" 且 href 指向 CSS 文件路径
浏览器只识别 rel="stylesheet" 的 <link> 才会加载并应用样式。写成 rel="style" 或漏掉 rel 属性，CSS 就不会生效，且控制台通常不报错，容易排查遗漏。
常见错误场景包括：模板中复制旧代码时残留 rel="preload"；构建后路径被重写但 href 没同步更新；CDN 地址带查询参数（如 ?v=1.2.0）导致缓存失效或 CSP 拦截。
-
href值必须是相对路径（如./css/main.css）或绝对路径（如/static/css/main.css），禁止用协议绝对 URL（如https://cdn.example.com/main.css）——除非明确走 CDN 且已配置 CORS/CSP - 多个
<link>按加载优先级从上到下排列：重置类（reset.css）→ 基础变量/工具类（vars.css,utils.css）→ 组件样式 → 页面样式 - 避免在
<body>内插入<link>，部分浏览器会阻塞渲染或触发重排
CSS 文件结构按功能分层，禁止混写全局样式和组件样式
一个典型的项目应有明确的目录层级，比如：
src/ ├── css/ │ ├── base/ │ │ ├── reset.css │ │ ├── vars.css /* :root 中定义 CSS 自定义属性 */ │ │ └── utils.css /* .sr-only, .visually-hidden 等辅助类 */ │ ├── components/ │ │ ├── button.css │ │ ├── card.css │ │ └── ... │ ├── layouts/ │ │ ├── header.css │ │ ├── sidebar.css │ │ └── ... │ └── pages/ │ ├── home.css │ └── profile.css
关键约束：
立即学习“前端免费学习笔记（深入）”；
-
base/下的文件不能 import 其他目录内容，也不能依赖组件类名 -
components/中每个文件只负责单个组件，命名与组件名严格一致（如Button组件对应button.css） -
pages/只允许用 class 选择器限定作用域（如.page-home .button），禁止直接写button { }这类标签选择器
使用 @import 时必须满足路径静态可解析，且仅限 base 层内部
@import 在构建工具（如 Vite、Webpack）中可能被忽略或转为 JS 加载逻辑，导致 SSR 失效或 FOUC。生产环境建议全部用 <link> 引入，开发期若需快速调试，只允许在 base/vars.css 中 @import 颜色/断点配置文件（如 @import './tokens/colors.css';）。
- 禁止在
components/或pages/中使用@import—— 容易造成循环依赖或构建顺序混乱 - 所有
@import路径必须以./或../开头，不能用别名（如@/css/...），否则 PostCSS 或原生解析会失败 - 如果用了 CSS-in-JS 或模块化方案（如
Button.module.css），就彻底禁用@import，避免混合范式
link 和文件结构约定需要配套 lint 工具校验
光靠文档和人工 review 很难长期维持一致性。建议接入 stylelint + 自定义规则：
- 用
stylelint-selector-bem-pattern强制 BEM 命名（如果团队采用） - 通过
stylelint-no-unknown-at-rules拦截非法@import用法 - 用自定义脚本检查
<link rel="stylesheet">的href是否落在css/目录下，且不含node_modules或dist
最容易被忽略的是：路径别名在 HTML 中不生效。比如 Webpack 别名 @css 只对 JS 中的 import 有效，HTML 的 <link href="@css/main.css"> 会被当作字面量请求，404 是必然结果。
