现代CSS嵌套需严格遵循原生语法：用&显式声明关系，媒体查询可直接写在嵌套块内，@container实现容器级响应式，禁用预处理器式错误写法。
现代 CSS 嵌套（Nesting）配合媒体查询，能显著提升样式组织的逻辑性和可维护性，但必须严格遵循原生语法规范——它不是“把@media塞进选择器里”，而是让媒体查询自然依附于嵌套作用域，同时避免常见静默失效陷阱。
确保浏览器支持并启用正确语法
Chrome 119+、Edge 119+、Safari 17.4+ 支持原生 & 和 @nest，Firefox 当前仍不支持。上线前务必实测关键设备，不能依赖 Can I Use 的绿标。
- 必须用
&显式声明嵌套关系，.card { h2 { color: blue; } }是非法的，应写成.card { & h2 { color: blue; } } -
&必须紧贴左括号后，不能有前置空格：&:hover✅，& :hover❌（语义变为后代元素 hover） - 媒体查询可直接写在嵌套块内，无需额外包裹，浏览器会自动将其绑定到父选择器作用域
在嵌套结构中直接写@media（推荐写法）
这是最简洁、最符合直觉的方式：媒体查询作为规则块内的顶层 at-rule，与选择器同级嵌套，语法合法且语义清晰。
-
.dialog { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }→ 编译为.dialog { padding: 1rem; } @media (min-width: 768px) { .dialog { padding: 2rem; } } - 支持嵌套层级中的媒体查询：
&__header { font-weight: bold; @media (prefers-reduced-motion: reduce) { animation: none; } } - 注意：不能把
@media写在@nest块内部，@nest只接受选择器，不接受 at-rule
用@container + @media 实现容器级响应式（更精准的替代方案）
当需要根据组件自身宽度（而非视口）响应时，@container 比 @media 更合适，且已获主流浏览器支持（Chromium 105+、Firefox 119+、Safari 16.4+）。
立即学习“前端免费学习笔记（深入）”；
- 先给父容器设
container-type: inline-size，再在其嵌套规则中使用@container - 可与
@media组合使用，实现“视口 + 容器”双重约束：@container (min-width: 400px) { @media (prefers-color-scheme: dark) { & { background: #1a1a1a; } } } - 比纯视口媒体查询更适合卡片、侧边栏等可复用组件
避免预处理器思维带来的典型错误
Sass/Less 的嵌套语法容易迁移到原生 CSS 中，但原生规则更严格，稍错即整条规则静默失效（无报错、不降级、DevTools 不显示）。
- 禁止写
.card { @media (...) { ... } }—— 这是非法嵌套，整条.card规则会被浏览器跳过 - 禁止在嵌套块中混用
@nest和@media：@nest & span { @media (...) { ... } }是无效语法 - 构建工具如 Vite 默认不启用
postcss-nesting，若需兼容旧浏览器，必须显式配置插件并验证输出结果
