如何复用CSS规则中的重复名称文本以精简冗余样式代码

你写的嵌套语法不生效是两个错误导致的：

• 双冒号::是CSS伪元素的专属语法，你这里需要的是把父选择器和后缀拼接为完整类名，不需要加双冒号
• 代码里的&是HTML转义后的字符，实际编写样式时要直接写&作为父选择器占位符

方案1：使用CSS预处理器（兼容性最优，推荐） #

目前Sass/Scss、Less等预处理器都完美支持这种嵌套语法，写完编译为普通CSS即可在所有浏览器运行，正确写法如下：

.alert {
  &-enter {
    opacity: 0;
    z-index: 3;
  }
  &-enter-active {
    opacity: 1;
    transition: opacity 15s linear;
    z-index: 3;
  }
  &-exit {
    opacity: 1;
    z-index: 2;
  }
  &-exit-active {
    opacity: 0;
    transition: opacity 15s linear;
    z-index: 2;
  }
}

编译后会自动生成你最开始贴的原生CSS代码，完全符合预期。

方案2：使用原生CSS嵌套 #

主流浏览器（Chrome 112+、Firefox 117+、Safari 16.5+）已经支持原生CSS嵌套，语法和上面预处理器的写法完全一致，不需要编译直接写在CSS文件里即可生效，适合不需要兼容旧浏览器的场景。

方案3：无嵌套的冗余精简写法 #

如果不想用预处理器也需要兼容旧浏览器，可以把公共属性抽离合并，也能大幅减少冗余代码：

/* 抽离公共z-index */
.alert-enter, .alert-enter-active {
  z-index: 3;
}
.alert-exit, .alert-exit-active {
  z-index: 2;
}
/* 抽离公共过渡 */
.alert-enter-active, .alert-exit-active {
  transition: opacity 15s linear;
}
/* 单独写差异化属性 */
.alert-enter {
  opacity: 0;
}
.alert-enter-active {
  opacity: 1;
}
.alert-exit {
  opacity: 1;
}
.alert-exit-active {
  opacity: 0;
}

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