I am trying to follow the BEM naming convention and I am unsure how to implement the following: I have a "tooltip" block which should be styled with different themes. Let's say I apply a "default" theme.
<div class="tooltip tooltip_theme_default"></div>
The tooltip can be placed around an element in different positions, this sounds to me like I have to add a "horizontal-position" and a "vertical-position" modifier to the block.
<div class="tooltip tooltip_theme_default tooltip_horizontal-position_center tooltip_vertical-position_top"></div>
Now I need to display a decoration on the tooltip, depending both on the theme and its position. I think I need a multiple class selector, but I can't see any examples of multiple selector like this on the BEM documentation.
.tooltip_theme_default.tooltip_horizontal-position_center.tooltip_vertical-position_top::before {
/* styles */
}
Is that allowed by the BEM specification?
Can you think of any drawbacks?
Should I try to rethink my component to use just flat classes selectors?
Although BEM advises to avoid multiple class selectors, in your case it is just fine. You may use 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