BEM? Blocks inside blocks?

Question

A little unsure on when to start a new context in BEM.

Should all child elements always reference the block element?

For e.g.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bem</title>
    </head>
    <body>
        <div class="header">
            <div class="header__left">
                <!-- Left column content -->
            </div>
            <div class="header__search">
                <!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
            </div>
        </div>
    </body>
</html>

Here the search is inside the 'header' div but should we really attach it to the header as this could be used elsewhere on the site?

Do you have new blocks inside blocks?

Cheers

I'd suggest providing an example of your best guess and letting others comment on it. I think that what you have asked here is too vague. — Jeremy Cook, Oct 26 '16 at 15:19

score 14 · Accepted Answer · answered Oct 26 '16 at 15:26

It's my understanding there isn't any problem with blocks overlapping, as long as the css being used to target each block is discreet and separate. So, the search styling shouldn't depend on the header styling if it's usable in other places. Similarly, the header styling doesn't need to go any further down once it loses relevance to its children.

Would something like this work; does that make sense?

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>bem</title>
    </head>
    <body>
        <div class="header">
            <div class="header__left">
                <!-- Left column content -->
            </div>
            <div class="header__right">
                <div class="search">
                    <input class="search__input>
                    <button class="search__button>GO!</button>
                </div>
            </div>
        </div>
    </body>
</html>

But am I doing it right when I style the search bar by doing: .header .search__input {} ? Or do change it with a modifier then? — Robbert, Jun 14 '18 at 08:51
The search bar probably shares styles with other text inputs, and since you want to repeat code as little as possible I would have a separate class/modifiers to style inputs - like o-input - and use that to style the search input. Classes for your search input might end up looking like `search__input o-input o-input--text o-input--large`, or something along those lines. IF the style is so, so specific that it will only ever apply to that search bar, then that styling is what goes on the `search__input` class. This makes things more reusable. — Jonathan Bowman, Jun 14 '18 at 16:25

score 0 · Answer 2 · answered Sep 19 '21 at 16:31

0

There is a missing end quote on the search__button element, but stack overflow is so rigid with its edit criteria it wont let me edit it.

answered Sep 19 '21 at 16:31

James0r

124
9

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 19 '21 at 16:40

BEM? Blocks inside blocks?

2 Answers2