0

Let's say I want to have a title block, and for styling considerations I need to nest it inside a div with some special CSS styling (e.g. I want specific border and spacing styling). Let's call this one box. The box just serves the style the title inside it.

The fact I need to have box at all just has to do with the limitations of CSS, so it doesn't make sense for the box to be considered a block in BEM terminology. It doesn't even make sense as a DOM element. But title is located inside box.

It makes sense to me to give box the class title__box because it doesn't make sense without title. However, all examples of BEM seem to assume the element is always a DOM child of the block it's in.

GregRos
  • 8,667
  • 3
  • 37
  • 63

1 Answers1

1

To answer your question plainly without investigating further into this, no. You would have to have something like the following 

<div class="decorator">
  <h1 class="title">blah blah</h1>
</div>

or

<div class="title">
  <h1 class="title__heading">blah blah</h1>
</div>

When using BEM you have to think in terms of "blocks", "elements" and their reusability. In particular, consider this from a developer perspective: you don't want to end up in a particular scenario where the developer will build the title in question and forget an element or an attribute and get mad trying to figure out why it doesn't work. This gives you consistency and replicability of your markup.

I have no specific insight on why you need the <div> and what are the CSS limitations that you're talking about, but I will take your word for it.

So I'm going to ask: have you thought of cleaning up the markup using pseudo selectors, or using the heading as the aforementioned container and using inline anonymous elements (i.e. <span>s)?

I hope this helps solving your problems.

Mr Peach
  • 1,364
  • 1
  • 12
  • 20