如何简化React Semantic UI中多类名模态框的公共样式代码？

方案1：原生CSS使用:is()伪类（无需预处理器） #

使用CSS原生的:is()伪类可以把多个选择器的公共部分提取出来，无需重复书写后缀，代码如下：

:is(.abc, .xyz).ui.modal > .close {
  top: 1.0535rem !important;
  right: 1rem !important;
  color: black;
}

该方案支持Chrome 88+、Firefox 78+、Safari 14+及以上版本的浏览器，如果你不需要兼容极老版本浏览器，这是最直接的简化方式。后续需要新增同类自定义modal类，只需要在:is()的括号内追加类名即可。

方案2：使用CSS预处理器（Sass/SCSS/Less等） #

如果你项目中已经接入了CSS预处理器，可以用嵌套语法实现，代码更易维护：

// SCSS写法示例
.abc, .xyz {
  &.ui.modal > .close {
    top: 1.0535rem !important;
    right: 1rem !important;
    color: black;
  }
}

编译后会自动生成你之前简化的逗号分隔选择器代码，兼容性和原有写法完全一致。

方案3：工程化更优的通用类方案 #

你可以直接给所有需要调整关闭按钮样式的modal新增一个统一的自定义类，比如custom-modal-close，无需枚举所有自定义类：

.custom-modal-close.ui.modal > .close {
  top: 1.0535rem !important;
  right: 1rem !important;
  color: black;
}

后续新增需要该样式的modal时，直接给组件加custom-modal-close类即可，不用修改CSS代码，维护成本更低。

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