Search code examples
bem

BEM - How to add a condition to a modifier?

I have positioning modifiers for my project's images. One of them is .image_stuck_left.
In the layout there is an image that should stick to the left only on wide screens.
How should I add this condition to the existing modifier?
Is image_stuck_left_viewport_wide a good name?

Solution

  • Independent blocks should not know about positioning. Consider using mixes instead.

    For you case it'd be something like this. Let's have a block called some-section where images should stuck to the left. In this case you may mix universal image block with an element of some-section: <img class="image some-section__image"> and apply styles about positioning to .some-section__image.

    As for wide viewport just use media queries for .some-section__image. No need for additional classes in this case.

    PS: image_stuck_left_viewport_wide is not a valid naming according to https://en.bem.info/methodology/naming-convention/