我在一个块中有两个元素，它们在语义上是不同的，但看起来应该是一样的，只是差别很小。如何在 BEM 中命名它们？
对于这种情况，BEM 的最佳做法是什么？有什么建议吗？
干杯，简
【问题讨论】：
标签： css naming-conventions bem
我想不出适用于这种情况的标准，但为了尽量减少在一个属性发生变化时所需的编辑并保持一致性，在纯 CSS 中，我认为最佳做法可能是：
.elem1,.elem2{
common-property:common-value;
common-property:common-value;
}
.elem1{
peculiarity:style;
}
.elem2{
peculiarity:style;
}
如果您想保留多个 CSS 或按照语义和/或页面部分逻辑划分您的 CSS，我建议将常用样式保留在“通用”CSS（部分）中，并在相应的 CSS/部分。
【讨论】：
这是一个有趣的问题，我也一直在努力解决这个问题！
在你的情况下，我会这样做。让我们总结两个最重要的事实：
在不了解有关样式的更多上下文的情况下，很难说哪种方法是最好的。让我们把它分成两种主要情况。
这里的关键是你必须做出决定在这种情况下你是：
案例1：如果他们打算有相似的样式，那么如果一个样式发生变化，另一个样式也应该跟随相同的变化；
案例 2：如果这两个元素恰好具有相似的样式。
因此，根据我的经验，我会向您推荐以下方法：
案例 1：只需为两个元素使用一个公共类，并为每个（或其中一个）使用一个修饰符。尝试尽可能抽象，因为元素在语义上非常不同。
例如，如果颜色相同 - 通过定义 brand-color 变量/类/mixin 来抽象它。如果大小相同，则通过定义container-width 对其进行抽象。如果margin相同，则通过定义全局margin来抽象它。
您可能会考虑不只是抽象一个，而是在不同的微抽象中抽象一些相似的属性（如示例）并为这两个元素中的每一个元素组合类强>。
案例 2：使用不同的类并为它们分配相同的样式。
可能没那么糟糕，您实际上可能会从中受益。如果您考虑一下，这两个元素恰好具有相似的样式 - 在单个样式更改的情况下无需同时更新它们。
当然，在所有情况下，请确保您做了足够的工作来扩展全局主题特定属性（例如 brand-color），这应该在所有元素中保持一致。
希望我的意见有所帮助！
【讨论】：