如何编写模块化CSS解决伪元素样式代码重复问题

方案1：使用CSS自定义属性（原生CSS，兼容性好，优先推荐） #

把共用的阴影值定义为全局CSS变量，所有需要用到该阴影的位置直接调用变量，后续仅需修改变量值即可全局生效：

/* 全局定义共用变量 */
:root {
  --down-right-box-shadow: 0.5em 0.5em 0.5em 0em rgba(0,0,0,50%);
}

.down-right-box-shadow {
  box-shadow: var(--down-right-box-shadow);
}

.panel::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 100%;
  margin-top: 0.2em;
  background-color: blue;
  /* 直接调用共用变量 */
  box-shadow: var(--down-right-box-shadow);
}

这个方案不需要额外的预处理器，还支持运行时动态修改阴影值，适配性最强。

方案2：使用CSS预处理器的Mixin（Sass/Less/Stylus项目适用） #

如果项目使用CSS预处理器，可将共用样式封装为混合宏，需要的位置直接引入，源码仅需维护一份：

/* 定义共用阴影的mixin */
@mixin down-right-box-shadow {
  box-shadow: 0.5em 0.5em 0.5em 0em rgba(0,0,0,50%);
}

.down-right-box-shadow {
  @include down-right-box-shadow;
}

.panel::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 100%;
  margin-top: 0.2em;
  background-color: blue;
  /* 引入mixin */
  @include down-right-box-shadow;
}

编译后CSS虽然还是会生成两份相同的阴影声明，但源码层仅需修改mixin即可同步更新所有引用位置，符合模块化开发习惯。

方案3：选择器分组（简单场景适用） #

如果项目规模很小，也可以直接把需要共用该样式的选择器合并写在一起，仅声明一次规则：

.down-right-box-shadow, .panel::after {
  box-shadow: 0.5em 0.5em 0.5em 0em rgba(0,0,0,50%);
}

缺点是当共用该样式的元素/伪元素变多时，选择器列表会变得冗长，维护性下降，仅适合少量复用的场景。

内容的提问来源于stack exchange，提问作者Enlico