媒体查询靠近相关规则

在现代响应式网页设计中，媒体查询(Media Queries)是不可或缺的工具。然而，如何组织媒体查询代码却是一个常被忽视但极其重要的问题。

什么是"媒体查询靠近相关规则"？

这一规范主张将媒体查询直接放在它所影响的CSS规则旁边，而不是将所有媒体查询集中放在文件末尾或单独的文件中。这种做法提高了代码的可维护性和可读性。

正面示例

示例1：SCSS中的良好实践

scss 复制代码

// 按钮基础样式
.button {
  padding: 12px 24px;
  font-size: 16px;
  
  // 中等屏幕调整
  @media (min-width: 768px) {
    padding: 14px 28px;
    font-size: 18px;
  }
  
  // 大屏幕调整
  @media (min-width: 1024px) {
    padding: 16px 32px;
    font-size: 20px;
  }
}

// 导航栏样式
.navbar {
  height: 60px;
  
  @media (min-width: 768px) {
    height: 80px;
  }
}

优点：

相关样式和其响应式变体集中在一起
修改时无需在不同文件或文件不同部分间跳转
删除组件时，所有相关代码（包括媒体查询）可以一起删除

示例2：复杂组件的模块化处理

scss 复制代码

.card {
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  @media (min-width: 768px) {
    margin: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  &__title {
    font-size: 18px;
    
    @media (min-width: 768px) {
      font-size: 22px;
    }
  }
  
  &__content {
    padding: 10px;
    
    @media (min-width: 768px) {
      padding: 20px;
    }
  }
}

反面示例

示例1：集中式媒体查询

scss 复制代码

// 所有基础样式
.button {
  padding: 12px 24px;
  font-size: 16px;
}

.navbar {
  height: 60px;
}

.card {
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card__title {
  font-size: 18px;
}

.card__content {
  padding: 10px;
}

// 所有媒体查询放在文件末尾
@media (min-width: 768px) {
  .button {
    padding: 14px 28px;
    font-size: 18px;
  }
  
  .navbar {
    height: 80px;
  }
  
  .card {
    margin: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .card__title {
    font-size: 22px;
  }
  
  .card__content {
    padding: 20px;
  }
}

缺点：

组件样式分散在文件不同位置
维护时需要上下滚动查找相关规则
增加删除组件的难度
容易遗漏某些组件的响应式处理

示例2：过度分离的媒体查询

scss 复制代码

// _base.scss
.button {
  padding: 12px 24px;
  font-size: 16px;
}

// _media-queries.scss
@media (min-width: 768px) {
  .button {
    padding: 14px 28px;
    font-size: 18px;
  }
}

缺点：

文件间跳转增加认知负担
组件样式不完整，需要查看多个文件
增加项目复杂性

为什么"靠近相关规则"更好？

可维护性：修改组件时，所有相关代码（包括响应式变体）都在同一位置
可读性：更容易理解组件在不同断点的表现
模块化：组件样式自成一体，便于复用和移动
减少错误：降低遗漏响应式调整的风险
删除安全：删除组件时可以一并删除所有相关代码

特殊情况处理

对于确实需要全局应用的媒体查询（如修改根字体大小或CSS变量），可以单独组织：

scss 复制代码

// 全局响应式设置
@media (min-width: 768px) {
  :root {
    --base-font-size: 18px;
  }
}

// 组件特定样式
.component {
  font-size: var(--base-font-size);
  
  @media (min-width: 768px) {
    // 组件特定的额外调整
  }
}

结论

"媒体查询靠近相关规则"是一种经过验证的最佳实践，它能显著提高CSS/SCSS代码的可维护性和可读性。虽然初期可能需要调整编码习惯，但长期来看，这种组织方式能为项目带来巨大好处，特别是在大型项目和团队协作环境中。