基础CSS遵循DRY原则如何避免重复书写display: grid属性

算力阿峰

2026-10-6

解决方案

方案1：使用通用工具类复用（最推荐）
你可以单独定义一个仅包含display: grid的原子类，所有需要grid布局的元素直接在HTML中加上该类即可，无需在每个选择器中重复写属性：
```
/* 提前定义工具类 */
.grid {
  display: grid;
}
```
之后给#header、#nav-bar对应的HTML标签加上class="grid"，原有CSS中各个选择器里的display: grid就可以全部删掉，只保留grid模板、间隙、对齐等独有配置即可。
这种方式扩展性最高，后续新增需要grid布局的元素，直接加类名就行，不需要修改CSS代码。
方案2：选择器分组声明
如果你不想修改HTML代码，也可以把所有需要设置grid布局的选择器放在同一条规则里统一声明：
```
/* 统一给需要的元素设置grid布局 */
#header, #nav-bar {
  display: grid;
}
```
后续每个选择器单独写自己的grid-template-columns等特殊配置即可，媒体查询里也可以用同样的方式分组，避免重复写相同属性。
额外说明：你之前尝试的两种方式本身就不符合CSS规范：
1. 通用选择器*会匹配页面所有元素，包括<p>、<span>、<a>这类原本不需要grid布局的行内/文本元素，强制设置为grid必然会破坏原有页面样式
2. display属性不属于可继承属性，父元素设置后子元素不会自动继承，所以给body加grid是不会传递给子元素的。