SASS样式优先级不符合预期，同时应用两类时如何避免属性覆盖？

两个类样式出现覆盖的核心原因是：类选择器的权重完全相同，CSS规则中后定义的样式会覆盖先定义的同名属性，你当前的代码里.radio-button定义在.radio-button-focused之后，所以背景色属性被覆盖。

必须同时使用两个类的前提下，可以用以下几种方案解决：

• 调整选择器权重
  给聚焦状态的选择器叠加基础类名，组合后的选择器权重高于单个类选择器，优先级自然更高，且该规则仅在两个类同时作用于元素时才生效，不会影响单独使用类名的场景。代码示例：

.radio-button.radio-button-focused {
  background-color: $PURPLE;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

.radio-button {
  background-color: $BLACK;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

如果要优化重复代码，可以用SCSS占位符简化：

%radio-button-common {
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

.radio-button {
  @extend %radio-button-common;
  background-color: $BLACK;
}

.radio-button.radio-button-focused {
  @extend %radio-button-common;
  background-color: $PURPLE;
}

• 调整类定义顺序
  同权重的选择器，后定义的规则优先级更高，你只需要把.radio-button的定义挪到.radio-button-focused之前即可，修改后代码示例：

.radio-button {
  background-color: $BLACK;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

.radio-button-focused {
  background-color: $PURPLE;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

• 搭配伪类/属性选择器提升权重
  如果聚焦状态是交互触发的，可以结合:focus伪类写规则，或者给聚焦类加属性选择器提升权重，示例：

// 配合focus伪类，适配键盘聚焦等场景
.radio-button:focus {
  background-color: $PURPLE;
}
// 或者用属性选择器提升权重
.radio-button-focused[class] {
  background-color: $PURPLE;
}

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