如何使用BEM中的相同样式命名语义不同的元素？

我在块中有两个元素在语义上是不同的，但看起来应该是一样的，只是差别很小。如何在BEM中命名它们？如何使用BEM中的相同样式命名语义不同的元素？

相同的类都为每个修饰符？（很难，因为它们语义上的差异很大）
不同的类并为它们分配相同的样式？（导致两个或更多地方元素的风格）
不同的类，并使用CSS-Postprocessors混入样式？（似乎是最好的选择，实际上命名问题是转移到mixin的名称）

在这种情况下BEM的最佳实践是什么？有什么建议吗？

干杯，一月

2016-11-15 Jan Hofmann

我不认为出现这种情况的一个标准，而是以减少的情况下，一个属性变化所需的编辑和十个分量的一致性，以纯CSS，我认为最好的做法可能是这样的：

.elem1,.elem2{ 
    common-property:common-value; 
    common-property:common-value; 
} 
.elem1{ 
    peculiarity:style; 
} 
.elem2{ 
    peculiarity:style; 
}

如果你想保持multple CSSS或将您的CSS以下语义和/或页面部分的逻辑，我建议你保持共同的风格在“一般” CSS（部分）并在各自的CSS /部分添加特性。

来源

2016-11-15 12:39:45

这是一个有趣的问题，这是我一直在挣扎的东西！

下面是我会如何做你的情况。让我们来总结行动的两个最重要的事实：

组件是非常不同的语义
他们应该差不多了

不知道有关样式的更多情况下，它会很难说哪个是最好的方法。让我们分成两个主要案例。

这里的关键是，你必须在这种情况下，你是决定：

案例1：如果他们计划有类似的风格，因此如果风格的一个改变，其他风格也应遵循相同的变化;
案例2：如果这两个元素碰巧有相似的风格。

所以，根据我的经验，这是我会向你推荐的方法：

案例1：只需使用一个通用类这两个元素使用的改性剂（S）为每个（或为其中之一）。尝试抽象为尽可能通用，因为元素在语义上非常不同。

例如，如果颜色相同 - 通过定义brand-color变量/ class/mixin将其抽象化。如果大小相同，则通过定义container-width来抽象它。如果边距相同，则通过定义全局margin将其抽象化。

你可能会考虑抽象不只是一个，但在不同的微抽象几个类似性质（如例子）和组成的类混合用于两个元素的。
案例2：使用不同的类并为它们分配相同的样式。

可能不是那么糟糕，你可能从中受益。如果你仔细想想，这两个元素恰好具有相似的样式 - 在单一样式变化的情况下不需要更新它们。

当然，在所有情况下，你一定要做足够的扩展全球特定主题的属性（如brand-color例如），这应该是所有元素一致。

我希望我的输入有帮助！

来源

2016-11-16 21:00:29

如何使用BEM中的相同样式命名语义不同的元素？

回答

相关问题