React15 - 写sass 样式文件，嵌套的结构好，还是扁平的结构好？

这是一个很好的问题！在 Sass 开发中，嵌套结构和扁平结构各有优劣，没有绝对的"好"与"不好"，关键在于根据具体场景选择合适的方案。下面我从多个角度详细分析，并结合 React 15 + CSS Modules 的场景给出建议。

两种结构的对比

1. 嵌套结构 (Nested)

// 深嵌套风格
.card {
  border: 1px solid #eee;
  padding: 16px;

  .header {
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;

    .title {
      font-size: 18px;
      font-weight: bold;

      .icon {
        margin-right: 8px;

        &:hover {
          opacity: 0.8;
        }
      }
    }

    .subtitle {
      font-size: 14px;
      color: #666;
    }
  }

  .content {
    .section {
      margin-bottom: 16px;

      &.last {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 16px;
      }
    }
  }

  .footer {
    border-top: 1px solid #eee;
    padding-top: 12px;

    .button {
      padding: 8px 16px;

      &.primary {
        background: blue;
        color: white;
      }
    }
  }
}

2. 扁平结构 (Flat/BEM)

// BEM 命名风格的扁平结构
.card {
  border: 1px solid #eee;
  padding: 16px;
}

.card__header {
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}

.card__title {
  font-size: 18px;
  font-weight: bold;
}

.card__title-icon {
  margin-right: 8px;

  &:hover {
    opacity: 0.8;
  }
}

.card__subtitle {
  font-size: 14px;
  color: #666;
}

.card__content-section {
  margin-bottom: 16px;
}

.card__content-section--last {
  margin-bottom: 0;
}

.card__section-title {
  font-size: 16px;
}

.card__footer {
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.card__footer-button {
  padding: 8px 16px;
}

.card__footer-button--primary {
  background: blue;
  color: white;
}

深入对比分析

维度	嵌套结构	扁平结构 (BEM)
可读性	结构清晰，父子关系一目了然	类名长但自解释，无需看结构就知道属于哪个组件
维护性	修改父级会影响所有子级	修改影响范围可控，独立性好
特异性	可能产生高特异性选择器 (如 .card .header .title)	特异性低且一致 (都是单个类名)
重用性	子样式与父耦合，难以独立使用	每个类都可独立使用和组合
文件大小	嵌套编译后也是扁平选择器，大小相当	直接编写扁平，大小相当
重构难度	移动元素需重写整个嵌套结构	移动元素只需复制类名

在 React 15 + CSS Modules 中的最佳实践

结合你使用 CSS Modules 的场景，我推荐适度嵌套的混合方案：

1. 基础结构：组件根元素使用一级嵌套

// Card.module.scss - 推荐方案
.card {
  // 组件根元素样式
  border: 1px solid #eee;
  padding: 16px;

  // 直接子元素样式（一级嵌套）
  &-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
  }

  &-title {
    font-size: 18px;
    font-weight: bold;

    // 标题下的图标（只有一层嵌套）
    .icon {
      margin-right: 8px;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  &-content {
    min-height: 100px;

    // 内容区域的段落（明确表示依赖关系）
    p {
      margin: 8px 0;
      line-height: 1.5;
    }
  }

  &-footer {
    border-top: 1px solid #eee;
    padding-top: 12px;
  }
}

2. 使用 BEM 命名的扁平结构（适用于大型组件）

// LargeComponent.module.scss
// 对于复杂的组件，使用 BEM 命名但保持扁平

// Block
.widget {
  background: white;
}

// Elements (使用 BEM 命名)
.widget__header {
  padding: 16px;
  background: #f5f5f5;
}

.widget__title {
  font-size: 18px;
}

.widget__content {
  padding: 16px;
}

.widget__footer {
  padding: 16px;
  border-top: 1px solid #eee;
}

// Modifiers
.widget--compact {
  .widget__header {
    padding: 8px;
  }

  .widget__content {
    padding: 8px;
  }
}

.widget--featured {
  border: 2px solid gold;
}

3. 针对不同元素的嵌套策略

// 根据不同情况选择不同策略
.component {
  // 情况1：独立元素 - 使用 BEM 扁平
  &__title {
    font-size: 18px;
  }

  &__description {
    color: #666;
  }

  // 情况2：强关联元素 - 使用嵌套
  &__media {
    position: relative;

    // 媒体元素上的覆盖层，与 media 强关联
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }
  }

  // 情况3：状态样式 - 嵌套在父级内
  &--expanded {
    .component__content {
      max-height: none;
    }

    .component__expand-icon {
      transform: rotate(180deg);
    }
  }

  // 情况4：媒体查询 - 在组件上下文中
  @media (max-width: 768px) {
    &__header {
      flex-direction: column;
    }

    &__title {
      font-size: 16px;
    }
  }
}

实用建议

1. 嵌套深度控制

规则：嵌套不要超过 3 层

// ❌ 糟糕：4层嵌套，难以维护
.widget {
  .header {
    .nav {
      .item {
        .link {
          // 太深了！
        }
      }
    }
  }
}

// ✅ 良好：最多3层，逻辑清晰
.widget {
  &-header {
    .nav {
      &-item {
        a {
          // 可以接受，层级关系明确
        }
      }
    }
  }
}

2. 使用 & 引用父选择器

// 充分利用 & 来保持结构清晰
.button {
  padding: 10px 20px;

  // 伪类
  &:hover {
    background: darken(blue, 10%);
  }

  // 修饰符
  &--large {
    padding: 15px 30px;
    font-size: 18px;
  }

  // 状态
  &.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  // 元素
  &-icon {
    margin-right: 8px;

    // 根据父组件状态变化的子元素
    .button--large & {
      width: 24px;
      height: 24px;
    }
  }
}

3. 在 React 组件中的对应关系

// Button.jsx
import React from 'react';
import styles from './Button.module.scss';

const Button = ({ large, children, icon }) => (
  <button className={styles.button}>
    {icon && <span className={styles['button-icon']}>{icon}</span>}
    <span className={styles['button-text']}>{children}</span>
  </button>
);

// 对应的 Sass
.button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;

  &-icon {
    margin-right: 8px;

    // 图标相关的样式
    svg {
      width: 16px;
      height: 16px;
    }
  }

  &-text {
    font-size: 14px;
  }

  // 修饰符
  &--large {
    padding: 15px 30px;

    .button-text {
      font-size: 18px;
    }

    .button-icon svg {
      width: 24px;
      height: 24px;
    }
  }
}

决策框架

根据你的具体场景，可以这样决策：

场景	推荐结构	理由
小型组件 (< 50 行)	适度嵌套	简单直观，开发快
中型组件 (50-200 行)	BEM 扁平 + 一级嵌套	平衡可读性和维护性
大型组件 (> 200 行)	严格 BEM 扁平	降低复杂度，方便多人协作
第三方库覆盖	深度嵌套（但需要精确）	提高特异性确保覆盖
通用样式库	BEM 扁平	最大程度复用和解耦

总结

在 React 15 + CSS Modules 的项目中，我建议采用这样的混合策略：

1. 主结构使用 BEM 风格：.block__element--modifier 命名清晰，配合 CSS Modules 的局部作用域很好
2. 适当使用一级嵌套：对于明显属于父元素的子元素，使用 &-element 语法
3. 不超过 3 层嵌套：保持选择器简洁，避免过度嵌套
4. 状态和修饰符放在外层：.block--modifier 内部可以嵌套状态相关的子元素样式
5. 利用 CSS Modules 特性：不用担心 BEM 类名过长，因为编译后会被哈希

最终目标是：代码易读、易维护、易重构，而不是单纯追求"嵌套"或"扁平"。