boooni boooni - 4 months ago 10
CSS Question

How to format html according to BEM naming concept?

I have the fooliwng code which is my approach to apply BEM naming to the project. But I guess something is wrong, because BEM states that elements of elemnts should not exist. How do I name them then?

<div class="container">
<div class="profile">
<p class="profile__message></p>
<div class="profile__item">
<div class="profile__item__el profile__item__el-image">
<a class="thumb"><img></a>
<div class="profile__item__el-remove"></div>
</div>
<span class="profile__item__el profile__item__el-name"></span>
<span class="profile__item__el profile__item__el-author"></span>
<span class="profile__item__el profile__item__el-date"></span>
<div class="profile__item__el-favorite"></div>
</div>
</div>
</div>


I see, that i should not use a separate class 'profile__item__el' becuz not all elements are of the same type, but the all are item-elements and I think it should be obvious from their class-names, but it seems like according to BEM it is not correct.

Answer

I guess I'd probably go more in this direction, but even this isn't really perfect:

<div class="container">
    <div class="profile">
      <p class="profile__message></p>
      <div class="profile__item">
        <div class="profile__attribute profile__image">
          <a class="thumb"><img></a>
          <div class="action--remove"></div>
        </div>
        <span class="profile__attribute profile__name"></span>
        <span class="profile__attribute profile__author"></span>
        <span class="profile__attribute profile__date"></span>
        <div class="action--favorite"></div>
      </div>
    </div>
</div>

The necessity of the "profile__attribute" class is questionable. You only really need it if you intend to apply styles to all of those various attributes.

I think you're misunderstanding the purpose of the 'modifier' part of BEM. Firstly, you only used one hyphen, but it should be with two, and secondly, the modifier is meant more for different variants of the same thing, like if you have a button element and a large and small variant, then you could have button--large and button--small. I'd say that name, author, and date are all separate elements, not different versions of the same element.

That all said, I'm not really sure there's a definite right or wrong for BEM, a lot of it depends on the person and what kind of coding styleguide you might have.