@import 不该用于 CSS 表单样式统一，因其阻塞渲染、无法被预处理器内联或 Tree-shake，导致加载延迟与首屏卡顿；应改用 并行加载 form-base.css，并确保其仅含控件重置与语义类名。
为什么 @import 不该用在 CSS 表单样式统一中
它会阻塞渲染，且无法被 CSS 预处理器（如 Sass/Less）内联或 Tree-shake，导致表单样式加载延迟、首屏卡顿。尤其当 @import 放在 form.css 末尾或嵌套多层时，浏览器必须串行下载解析，而现代项目普遍用构建工具管理样式依赖。
用 link 替代 @import 引入表单样式更可靠
直接在 HTML 中用 <link rel="stylesheet"> 加载统一的表单样式文件，能并行下载、支持 media 查询、可被 preload 优化。
- 把表单样式抽成
form-base.css，放在 CDN 或静态资源目录下 - 在所有需要表单的页面中统一加：
<link rel="stylesheet" href="/css/form-base.css">
- 避免写成
@import url('/css/form-base.css');—— 尤其别放在main.css中间或末尾 - 若用 Webpack/Vite，更推荐
@import './form-base.css';（注意是预处理器语法，不是 CSS 原生@import）
form-base.css 里该写什么，不该写什么
核心是「控件级重置 + 语义化类名封装」，不依赖 HTML 结构深度，也不强绑 JS 行为。
- 重置默认：对
input、select、textarea统一box-sizing: border-box、font-family、line-height - 定义基础类：比如
.form-control（用于所有单行输入）、.form-select（专用于select）、.form-checkbox-group（包裹多选组） - 避免写
form input[type="text"]这种强结构选择器——它会在 BEM 或 Shadow DOM 场景下失效 - 不要在里面写 JavaScript 相关状态类（如
.is-valid），那属于运行时逻辑，应由 JS 动态添加
IE 和旧版 Safari 下 @import 的兼容性陷阱
IE9–11 对 @import 层级有限制（最多 4 层嵌套），且不支持 @import url(...) supports(...)；旧版 Safari（@import 后追加媒体查询会整个忽略该规则。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@import url('form-base.css') screen and (min-width: 768px);→ Safari 13 下整条失效 - 若必须条件加载，请用
<link media="...">，而不是@import加媒体条件 - 构建阶段如果用了 PostCSS，
@import会被插件处理成内联，但开发时热更新可能漏掉依赖，造成样式不一致
.form-control 在暗色模式、缩放 125%、高对比度设置下依然可用——这些没法靠 @import 解决，得靠系统级媒体查询和语义化属性配合。 
