应按base.css→组件CSS→页面CSS顺序引入，用BEM规范命名避免class冲突，禁用@import而用多个link标签，媒体查询写在各组件文件内并用CSS变量统一断点。
多个 CSS 文件怎么引入才不冲突
浏览器按 <link> 标签出现顺序加载 CSS，后引入的样式会覆盖先引入的同名规则。这不是“冲突”，而是层叠（cascade）的正常表现。关键在控制顺序和作用域。
- 基础样式（重置、字体、颜色变量）必须最先引入，比如
base.css - 组件样式（
button.css、card.css）放在中间，避免依赖未定义的变量或类名 - 页面专属样式（
home.css）放最后，用于覆盖或微调 - 不要在多个文件里重复写
body { margin: 0; }这类全局重置，统一归到base.css
如何避免 class 名重复导致样式错乱
没有命名空间机制时，靠约定比靠工具更可靠。BEM 是最易落地的方案，它不依赖构建工具，纯手写也有效。
- 块名用中划线分隔，如
header-search，不写search或HeaderSearch - 元素名加双下划线：
header-search__input、header-search__btn - 修饰符加双中划线：
header-search--large，只用于状态或变体，不用作布局控制 - 禁止跨块嵌套选择器，比如
.user-card .header-search—— 这类耦合会让拆分失去意义
要不要用 @import 拆分 CSS 文件
不要。现代项目中 @import 已是反模式：它会阻塞并串行加载，比 <link> 多一次 HTTP 往返（即使同域），且无法被 HTTP/2 多路复用优化。
- 构建阶段可用 PostCSS 的
postcss-import预处理，但输出仍是单个 CSS 文件 - 开发时若需热更新局部样式，用构建工具（Vite/Webpack）的 CSS 模块化支持，而非运行时
@import - 如果真要保留多文件结构，就用多个
<link rel="stylesheet">，由 HTML 控制顺序和条件加载
媒体查询该写在各文件里，还是统一收口
写在各自文件里。响应式不是“最后加一层”，而是组件级决策。一个 card.css 应该自己决定在小屏下如何折叠内容，而不是等 responsive.css 全局干预。
立即学习“前端免费学习笔记（深入）”；
- 每个组件文件末尾可跟自己的
@media块，保持关注点一致 - 避免把所有断点提取成变量再到处引用（如
$breakpoint-mobile），CSS 里没运行时变量作用域，容易误用 - 如果断点值确实要复用（比如统一用
768px表示平板），用 CSS 自定义属性（--bp-tablet: 768px）定义在base.css，再用min-width: var(--bp-tablet)调用
:root {
--bp-tablet: 768px;
}
.card {
padding: 1rem;
}
@media (min-width: var(--bp-tablet)) {
.card {
padding: 1.5rem;
}
}
CSS 文件拆分本身不难，难的是让每个文件知道自己该管什么、不该碰什么。最常出问题的地方不是语法或工具，而是团队对“一个组件样式=一个文件”这个边界的理解不一致 —— 有人把布局逻辑塞进 button.css，有人又在 layout.css 里重定义按钮边框。边界模糊了，文件再多也没用。 
