BEM命名多个复杂修饰符的约定[关闭]

Question

关闭。这个问题是opinion-based。它当前不接受答案。

---

想要改善这个问题？更新问题，以便editing this post可以用事实和引用来回答。

[<9天前关闭。

我一直困惑寻找命名多个修饰符的最佳方法，我知道这种方法的基本规则，并且阅读了BEM官方快速入门文档（bem.info/methodology/quick-start）

我在一个块中有一些修饰符而其中一个修饰符对另一个修饰符有一些影响时，给修饰符命名（换句话说，一个修饰符除了修改主块之外，还正在修改该块的另一个修饰符）

为了解释这种情况，我没有使用简单的示例来解释问题，所以请告诉我以下示例中的哪一个是正确和最佳选择：

解决方案1）

SCSS：

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;
    }
    &--outline#{&}--primary {
        border: 1px solid blue;
    }
    &--outline#{&}--secondary {
        border: 1px solid black;
    }
}

编译的CSS：
.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline {
  background: transparent;
}
.btn--outline.btn--primary {
  border: 1px solid blue;
}
.btn--outline.btn--secondary {
  border: 1px solid black;
}

HTML用法示例：
<a href="#" class="btn btn--primary btn--outline>...</a>

解决方案2）
SCSS：
.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;
    }
    &--outline#{&} {
        &--primary {
            border: 1px solid blue;
        }
        &--secondary {
            border: 1px solid black;
        }
    }
}

编译的CSS与解决方案1相同
HTML中的用法示例也与解决方案1相同
实际上，我只是在修饰符中进行了嵌套，以防止重复“轮廓”，
解决方案3）
SCSS：
.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;

        &--primary {
            border: 1px solid blue;
        }
        &--secondary {
            border: 1px solid black;
        }
    }
}

编译的CSS：
.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline {
  background: transparent;
}
.btn--outline--primary {
  border: 1px solid blue;
}
.btn--outline--secondary {
  border: 1px solid black;
}

HTML用法示例：
<a href="#" class="btn btn--outline btn--outline--primary">...</a>

解决方案4）
SCSS：
.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        &--primary {
            background: transparent;
            border: 1px solid blue;
        }
        &--secondary {
            background: transparent;
            border: 1px solid black;
        }
    }
}

编译的CSS：
.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline--primary {
  background: transparent;
  border: 1px solid blue;
}
.btn--outline--secondary {
  background: transparent;
  border: 1px solid black;
}

HTML用法示例：
<a href="#" class="btn btn--outline--primary">...</a>

您看到此解决方案更易于在HTML中使用，但是我们在每个主要和次要修饰符中都复制了相同的CSS属性（在这种情况下，我们正在复制background：transparent;在其他修饰符中），您可能会认为它并没有问题，但是在实际情况下，我们可能会拥有很多在许多地方重复的属性，因此，肯定的是，此解决方案对于将来该组件的开发将有重要的问题
解决方案5）
SCSS：
.btn {
    font-size: 14px;

    &--primary {
        background: blue;

        &--outline {
            background: transparent;
            border: 1px solid blue;
        }
    }
    &--secondary {
        background: black;

        &--outline {
            background: transparent;
            border: 1px solid black;
        }
    }
}

编译的CSS：
.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--primary--outline {
  background: transparent;
  border: 1px solid blue;
}
.btn--secondary {
  background: black;
}
.btn--secondary--outline {
  background: transparent;
  border: 1px solid black;
}

HTML用法示例：
<a href="#" class="btn btn--primary--outline">...</a>

我们在此解决方案中也具有重复的属性（例如解决方案4）
因此它没有良好的开发结构，并且会打扰程序员使用大型组件
我只是想知道哪种解决方案是最佳选择，或者如果您对此问题有其他解决方案，请根据此按钮示例编写。
我也再次提到这一点：我以很小的实际组件比例编写了该示例，因此在该示例中似乎不关心属性或类名称的任何重复，但是在实际项目中更复杂的情况下，这将是一个严重的问题用于开发组件。

Answer 1

连锁属性选择器似乎很适合您的特殊情况。假设我们所有按钮至少包含.btn。这样，您既可以将每个修改用例的逻辑保留在专用的CSS规则中，又可以将重复项降至最低。