0

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>
John McGuinnes
  • 1
  • 2

2 Answers2

1

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/

Zentro
  • 73
  • 1
  • 7
  • Thanks! I'm starting to see the advantage of BEM more and more. At first it's a bit "overwhelming" with all the class names. – John McGuinnes Jul 18 '16 at 09:00
0

"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.

Oskar Szura
  • 2,469
  • 5
  • 32
  • 42
  • The `portfolio__item` has almost the same styling as the `hero--collage hero__item`. So to avoid duplicated css i thought i could use the `portfolio__item` inside the `hero--collage`. Is the best way to extend (i'm using sass) the styling from the `portfolio__item` to the `hero__item--portfolio`? – John McGuinnes Jul 07 '16 at 16:00
  • If you use LESS/SASS you can create a generic virtual class like .virtual-1 and extend another classes with it like: .hero--collage { .virtual-1; // custom styles } .portfolio__item { .virtual-1; // custom styles } – Oskar Szura Jul 07 '16 at 16:02
  • Thanks for your comment, i was aware of the extend. But a lot of people don't recommend to use extends. But in this case i guess it's ok, because almost all classes are at root level because of the BEM structure. – John McGuinnes Jul 08 '16 at 13:01