nav.css 里写什么才真正能复用
直接把导航样式塞进 nav.css 不等于能复用——关键在「不依赖父容器、不污染全局、不硬编码颜色/尺寸」。否则换个页面就漏样式，或者一改配色全站导航集体翻车。
实操建议：
- 所有选择器以
.nav或[role="navigation"]开头，避免用nav标签名（语义化 HTML 可能不用nav元素） - 用 CSS 自定义属性（
--nav-bg、--nav-link-color）代替具体值，方便外部覆盖 - 不写
body .nav这类强层级关系，防止嵌套深了失效 - 主动重置常见干扰：比如
.nav ul { margin: 0; padding: 0; list-style: none; }
@import 在现代项目里为什么常失效
@import 看似简单，但实际加载顺序、作用域和构建工具兼容性问题一堆。最典型的是：它被当成「同步阻塞」处理，且在 @media 或 @layer 内部行为不一致。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 项目里
@import "nav.css";报错「not found」——因为构建工具默认不解析 CSS 中的@import，只认 JS 的import - 多个
@import嵌套时，变量无法跨文件传递（:root里的自定义属性不会冒泡） - 放在
@media (min-width: 768px)里导入的nav.css，里面的响应式规则可能被忽略
替代方案更稳：@use（Sass）或直接 import "./nav.css"（JS 模块中），或者用构建插件支持 CSS @import（如 PostCSS-import）
如何让 nav.css 适配 dark mode 切换
复用不只是「一次写，到处贴」，而是「一次写，随主题变」。靠 JS 切 class 很容易漏掉子组件，纯 CSS 方案更可靠。
使用场景：
- 页面根元素有
data-theme="dark"属性 - 希望导航背景、文字、hover 效果自动响应切换
实操建议：
- 在
nav.css里写两套规则：.nav { --nav-bg: #fff; --nav-text: #333; }和[data-theme="dark"] .nav { --nav-bg: #1a1a1a; --nav-text: #eee; } - 所有颜色/背景都用这些变量，不要写死
#000或white - 避免用
@media (prefers-color-scheme: dark)—— 它不能响应用户手动切换，只认系统偏好
移动端导航折叠按钮的样式怎么不和 nav.css 冲突
折叠菜单（hamburger）逻辑通常在 JS 里控制 .nav.is-open，但样式如果混在 nav.css 里，容易和 PC 端规则打架，比如 .nav ul 在移动端本该隐藏，却因 specificity 不够没生效。
参数差异与性能影响：
- 移动端关键要加
@media (max-width: 767px)包裹折叠相关样式，且确保它在 PC 规则之后（CSS 加载顺序决定层叠） - 别用
display: none隐藏整个.nav，而要用visibility: hidden+height: 0配合 transition，否则 JS 动态计算高度会出错 - 避免在
nav.css里写.nav-toggle { position: absolute; right: 1rem; top: 1rem; }这种强定位——它假设导航一定在右上角，实际可能在左下或固定底部
复杂点在于：折叠状态管理是 JS 职责，但动画和视觉反馈必须和 CSS 协同。很多人卡在「JS 加了 class，但 CSS 没匹配上」，本质是选择器优先级或媒体查询断点没对齐
