CODEWITHSUNDEEP
htmlcssnaming-conventionsbem
boooni
boooni

Reputation: 153

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.

Upvotes: 0

Views: 421

Answers (2)

Zentro
Zentro

Reputation: 73

Short answer.

Every block inside have only element or another block

So every element have a class like block-name__elem-name - without additional class.

Every block - set namespace.

To change look for blockor element in BEM use modifier.

How it works: html + css - see below

BEM also is a stack of technology with own template engine. So you don't need to write plain html - it's compiling automatically.

How it looks like(bemjson):

{
  block : 'row',
    content : [
      {
          elem : 'col',
          mods : { sw : 4, mw : 2, lw : 2, xlw : 2 },
          content : [
              {
                  block : 'footer', // it's determine parent of element
                  elem : 'age',    // but it's element
                  content : [
                      {
                          block : 'icon',
                          mods : { type : 'some-icon' }
                      }
                  ]
              },
          ]
      },
  ]
}

You can see output html in bundle(html):

<div class="row"> // block-namespace
  <div class="row__col row__col_sw_4 row__col_mw_2 row__col_lw_2 row__col_xlw_2"> //elem row__col, then modifiers
    <div class="footer__age"> // element age with forced block footer
      <i class="icon icon_type_some-icon">
        <svg></svg>
      </i>
    </div>
</div>

css looks like this(element basically in 2 lvl):

.row // namespace
{
    margin: 0 -7px;

    &__col // element
    {
        padding: 0 7px;
    }
    &__col_p_0 // element with modifier
    {
      padding: 0px;
    }
}

Official website docs: https://en.bem.info/methodology/naming-convention/

Upvotes: 2

Scott Finlay
Scott Finlay

Reputation: 86

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.

Upvotes: 0

Related Questions