BEM嵌套场景下SCSS实现hover仅修改指定子元素样式的最优方案咨询

最优实现方案 #

你现有写法的核心问题是把list__link的交互样式拆分到了list__item的规则块中，不符合样式内聚的原则，我们可以把交互逻辑收拢到list__link的规则块内，同时兼容BEM和SCSS的嵌套特性：

.list {
    // 存储根选择器，后续修改根类名不用调整内部代码
    $root: &;

    &__wrapper {
        // wrapper 样式
    }    

    &__menu {
        // menu 样式
    }

    &__item {
        // item 基础样式
    }

    &__link {
        // link 基础样式
        color: $primary;

        // 父元素hover时的样式，完全收拢在link的规则块内
        #{$root}__item:hover & {
            color: $secondary;
        }
    }
}

方案优势 #

1. 完全符合BEM设计规范：所有和list__link相关的样式都收拢在同一个规则块下，后续维护不需要跨块查找样式
2. 复用SCSS嵌套能力：通过$root变量存储根选择器，后续如果根类名从list改为其他值，只需要修改最外层的类名即可，内部代码不需要改动
3. 无性能损耗：编译后生成的CSS和你原有写法完全一致，没有额外的选择器开销

如果你不需要根类名复用的能力，也可以简化写法：

.list {
    &__link {
        color: $primary;
        .list__item:hover & {
            color: $secondary;
        }
    }
}

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