I've been working on implementing the BEM naming convention, and I'm facing a challenge with styling a "tooltip" block using different themes. For example, applying the "default" theme like this:
<div class="tooltip tooltip_theme_default"></div>
As the tooltip can be positioned around an element in various ways, I believe I need to include both "horizontal-position" and "vertical-position" modifiers to the block.
<div class="tooltip tooltip_theme_default tooltip_horizontal-position_center tooltip_vertical-position_top"></div>
Adding a decoration to the tooltip based on the theme and position requires a multiple class selector. However, I haven't found any clear examples of this in the BEM documentation.
.tooltip_theme_default.tooltip_horizontal-position_center.tooltip_vertical-position_top::before {
/* styles */
}
My questions are:
Is this approach in line with the BEM specification?
Can you foresee any potential issues with it?
Should I reconsider my component structure and use simpler flat class selectors instead?