CSS嵌套：告别选择器地狱的新魔法！

CSS嵌套：告别选择器地狱的新魔法！

作者：前端探险家 | 2025年7月4日

你是否曾为这样的CSS代码崩溃过？

.navbar .list > li:hover .dropdown .item a {
    ... }

选择器嵌套越深，维护越痛苦。现在，原生CSS嵌套（CSS Nesting）正式被Chrome、Firefox、Safari全线支持！它让我们像写Sass一样书写原生CSS：

传统写法 vs 嵌套写法

/* 传统 */
.card {
    ... }
.card:hover {
    ... }
.card .title {
    ... }

/* 嵌套 */
.card {
   
  &:hover {
    ... }  
  .title {
    ... }  /* 直接嵌套！ */
}

关键优势：

1. 减少重复：无需重复父选择器
2. 作用域清晰：样式逻辑集中，避免全局污染
3. 媒体查询简化：

   .sidebar {
        
     width: 300px;
     @media (max-width: 768px) {
        
       width: 100px;
     }
   }
   

注意陷阱：

• &符不可省略：如 &:hover
• 优先级问题：嵌套选择器优先级可能高于预期
• 不支持深层嵌套：如 div { p { ... } } 需改为 div { & p { ... } }

渐进式使用技巧：

/* 混合传统与嵌套 */
.old-class {
    ... }
.new-class {
   
  @nest .old-class & {
    ... } /* 向后兼容 */
}

展望：嵌套仅是CSS模块化的开始，未来将与@scope、@layer协同构建更健壮的样式体系。现在就在项目中尝试吧！

行动建议：使用PostCSS或Vite自动兼容旧浏览器，享受现代CSS开发体验！

文章总结：聚焦CSS Nesting核心用法，结合痛点对比与传统方案差异，提供可落地的实践建议。如需调整主题（如React性能优化、WebAssembly等），欢迎随时补充！