CODEWITHSUNDEEP
htmlcssbem
user1164937
user1164937

Reputation: 2117

Does BEM force you to create unnecessary elements?

<header>
  <a href="#"><img src="kitty.jpg" /></a>
  ...
</header>

For example, I have this sitting in the header, and it doesn't depend on the header block. In order to make it BEM-friendly, I lean towards doing this:

<header>
  <div class="logo">
    <a href="#" class="logo__link"><img src="kitty.jpg" class="logo__img" /></a>
  </div>
  ...
</header>

Is this the correct way to approach BEM?

Upvotes: 2

Views: 59

Answers (1)

Hatchet
Hatchet

Reputation: 5428

By "it doesn't depend on the header block" I assume you mean that you reuse this logo-esque structure elsewhere. By definition, then, it is a block, since it has "no dependency on other blocks/elements on a page".

Therefore, if my interpretation of your question is correct, you should be able to give your anchor tag a class of logo and the image within logo__img; the wrapper div.logo is unnecessary.

To answer the title question, no, BEM shouldn't really force your much HTML in any way. It's primarily a CSS methodology, and you can define blocks and elements on any DOM node that accepts class names.

Upvotes: 3

Related Questions