Sass Scss：多边界元状态类

我正在使用SCS为我的当前项目与BEM州公约

我需要的是：

CSS

.name {
    font-size: 10px;
}
.name--is-focus {
    font-size: 12px;
}
.name--is-active {
    font-size: 14px;
}
.name--is-focus.name--is-active {
    font-size: 16px;
}

.name {
    font-size: 10px;

    &--is-focus {
        font-size: 12px;
    }

    &--is-active {
        font-size: 14px;
        &.name--is-focus {
            font-size: 16px;
        }
    }

}

SCSS

.name {
    font-size: 10px;
}
.name--is-focus {
    font-size: 12px;
}
.name--is-active {
    font-size: 14px;
}
.name--is-focus.name--is-active {
    font-size: 16px;
}

.name {
    font-size: 10px;

    &--is-focus {
        font-size: 12px;
    }

    &--is-active {
        font-size: 14px;
        &.name--is-focus {
            font-size: 16px;
        }
    }

}

代码工作得很好。 然而，对于这种情况，这是正确的方法吗？ 我认为应该有一个更优雅的方式来代替这个

&--is-active {
    font-size: 14px;
    &.name--is-focus {
        font-size: 16px;
    }
}

---

你的代码本身没有问题。也就是说，在这种情况下，SCS真的对您有利吗？SCS是否比CSS更具可读性和可维护性？我个人认为CSS更好。