Menu
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
287
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
