CODEWITHSUNDEEP
elementmodifierbem
John McGuinnes
John McGuinnes

Reputation: 1

BEM css - Mix elements/modifiers

I've a question about BEM structure. Is it semantically correct to mix elements/modifiers? I have a hero and portfolio module. I want to use an portfolio__item in the hero module, but it should use the base styling of the hero__item. Is this an correct way of doing this, is it 'allowed' to mix these elements?

<section class="hero hero--collage hero--bottom-decoration">    
    <div class="portfolio__item hero__item hero__item--animated">
        <a href="http://www.google.nl"> 
            <div class="hero__hover">
                <span class="hero__hover__content h1">Hover title</span>
            </div>
            <img src="http://www.google.nl" class="hero__image">
        </a>
    </div>
</section>


<section class="portfolio">
    <div class="portfolio__item">
        <a href="http://www.google.nl"> 
            <img src="http://www.google.nl" class="hero__image">
        </a>
    </div>
</section>

Upvotes: 0

Views: 1791

Answers (2)

Zentro
Zentro

Reputation: 73

You can do whatever you want. But BEM methodology says:

block set namespace

It's a little messy to read this. I can't understand it at a glance. The goal of BEM - separate blocks so you don't need write same block again. And the same for styles. With this and modifiers you can reuse and tweak every block you need.

You can mix block and elements

<img src="http://www.google.nl" class="block-name hero__image">

So on 'block-name' you can match styles for every instance. On hero__image or another element you can match unique styles.

You can't create elements of elements

You don't need write 2 lvl. Cause name of your block set namespace.

<span class="hero__hover__content h1">Hover title</span>

Just

<span class="hero__hover-content h1">Hover title</span>

docs: https://en.bem.info/methodology/naming-convention/

Upvotes: 1

Oskar Szura
Oskar Szura

Reputation: 2569

"Is it semantically correct to mix elements/modifiers" - I assume you want to place portfolio__item element within the hero block - it's not a good thing. You can nest a block within a block but not block's element within another block's element.

You can use modifiers to hero__item element thought like 

<div class="hero__item hero__item--portfolio"></div>

which will change it's style.

Upvotes: 0

Related Questions