CSS 嵌套：编写更优雅的样式代码

让 CSS 结构更清晰，层次更分明，代码更易维护。

一、CSS 嵌套的优势

作为一名把代码当散文写的 UI 匠人，我对代码的可读性和结构有着近乎偏执的要求。CSS 嵌套让我们能够按照 HTML 的层次结构来组织样式，就像写小说一样，有章节、有段落、有层次。这不仅让代码更易读，也让维护变得更加轻松。

二、基础嵌套语法

css 复制代码

/* 传统写法 */
nav {
  background: #f8f9fa;
  padding: 1rem;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav ul li {
  margin: 0;
}

nav ul li a {
  color: #333;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

nav ul li a:hover {
  background: #e9ecef;
  color: #000;
}

/* 嵌套写法 */
nav {
  background: #f8f9fa;
  padding: 1rem;
  
  ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    
    li {
      margin: 0;
      
      a {
        color: #333;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        
        &:hover {
          background: #e9ecef;
          color: #000;
        }
      }
    }
  }
}

三、高级嵌套技巧

1. & 选择器的使用

css 复制代码

/* 伪类和伪元素 */
.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  &:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
  }
  
  &::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background: url('icon.svg') no-repeat center;
  }
}

/* 组合选择器 */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  &.featured {
    border: 2px solid #667eea;
  }
  
  &:not(.featured) {
    border: 1px solid #e9ecef;
  }
  
  & + & {
    margin-top: 1rem;
  }
}

2. 媒体查询嵌套

css 复制代码

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  @media (max-width: 480px) {
    padding: 0.75rem;
  }
  
  .logo {
    font-size: 1.5rem;
    font-weight: bold;
    
    @media (max-width: 768px) {
      font-size: 1.25rem;
    }
  }
  
  .nav {
    display: flex;
    gap: 1.5rem;
    
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 0.75rem;
      width: 100%;
    }
  }
}

3. 容器查询嵌套

css 复制代码

.card-container {
  container-type: inline-size;
  container-name: card;
  
  .card {
    display: flex;
    flex-direction: column;
    
    @container card (min-width: 300px) {
      flex-direction: row;
      
      .card-image {
        flex: 0 0 120px;
      }
    }
    
    @container card (min-width: 400px) {
      .card-title {
        font-size: 1.25rem;
      }
    }
  }
}

四、嵌套的最佳实践

1. 合理的嵌套深度

css 复制代码

/* 推荐：最多 3-4 层嵌套 */
.header {
  /* 第一层 */
  .nav {
    /* 第二层 */
    .nav-item {
      /* 第三层 */
      .nav-link {
        /* 第四层 */
        &:hover {
          /* 第五层 - 尽量避免 */
        }
      }
    }
  }
}

2. 语义化命名

css 复制代码

/* 好的命名 */
.main-header {
  /* 样式 */
  
  .main-nav {
    /* 样式 */
  }
}

/* 避免过度缩写 */
.mh {
  /* 不推荐 */
  
  .mn {
    /* 不推荐 */
  }
}

3. 模块化组织

css 复制代码

/* 模块级嵌套 */
.calendar {
  /* 日历容器 */
  
  &__header {
    /* 日历头部 */
  }
  
  &__body {
    /* 日历主体 */
    
    &__day {
      /* 日期 */
      
      &--today {
        /* 今天 */
      }
      
      &--selected {
        /* 选中的日期 */
      }
    }
  }
  
  &__footer {
    /* 日历底部 */
  }
}

五、性能考量

编译时间：过度嵌套会增加编译时间
选择器权重：嵌套会增加选择器的特殊性
文件大小：深层嵌套可能会生成冗长的选择器

六、工具支持

1. PostCSS Nested

bash 复制代码

npm install postcss-nested --save-dev

js 复制代码

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-nested')
  ]
};

2. Sass/Less

scss 复制代码

// Sass 原生支持嵌套
.nav {
  ul {
    li {
      a {
        color: blue;
        
        &:hover {
          color: red;
        }
      }
    }
  }
}

CSS 嵌套让样式代码像散文一样有结构、有韵律。

#css #nesting #frontend #web-development #code-quality