BEM 多重 类 选择器

Question

我正在尝试遵循 BEM 命名约定，但我不确定如何实现以下内容：我有一个 "tooltip" 块，应该使用不同的主题设置样式。假设我应用了 "default" 主题。

<div class="tooltip tooltip_theme_default"></div>

工具提示可以放置在不同位置的元素周围，这对我来说听起来像是我必须向块添加 "horizontal-position" 和 "vertical-position" 修饰符。

<div class="tooltip tooltip_theme_default tooltip_horizontal-position_center tooltip_vertical-position_top"></div>

现在我需要根据主题及其位置在工具提示上显示装饰。我想我需要一个多重 class 选择器，但我在 BEM 文档中看不到任何像这样的多重选择器的例子。

.tooltip_theme_default.tooltip_horizontal-position_center.tooltip_vertical-position_top::before {
     /* styles */
 }

BEM 规范允许这样做吗？
你能想到什么缺点吗？
我是否应该重新考虑我的组件以仅使用平面 classes 选择器？

Answer 1

尽管 BEM 建议避免使用多个 class 选择器，但在您的情况下这很好。您可以使用 bem-components library as a source of examples. E.g. https://github.com/bem/bem-components/blob/v2/design/common.blocks/popup/_theme/popup_theme_islands.styl#L22