CODEWITHSUNDEEP
cssbem
Andrea Casaccia
Andrea Casaccia

Reputation: 4971

BEM multiple classes selector

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?

Upvotes: 1

Views: 2841

Answers (1)

tadatuta
tadatuta

Reputation: 2025

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

Upvotes: 1

Related Questions