Tips on properly styling HTML using the BEM naming convention

Question

Tips on properly styling HTML using the BEM naming convention

I'm trying to implement BEM naming in my project, but I'm having trouble with how to name elements within elements. BEM guidelines state that elements of elements should not exist. How should I approach naming them correctly?

<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>

After reviewing the code, I realize that having a separate class 'profile__item__el' for all elements might not be the best approach as not all elements are of the same type. They are all item elements, and I believe their class names should convey that information. However, it seems that according to BEM principles, this is not the correct way to name them.

html css naming-conventions bem

Answer 1

Answer №1

Quick response.

Each block contains either an element or another block

Therefore, every element is assigned a class like block-name__elem-name - without any additional classes.

Every block has its own namespace.

To customize the appearance of a block or element in BEM, use a modifier.

Here's how it works: html + css - check it out below

BEM is also a set of technologies with its own template engine. You don't have to write plain html - it's automatically compiled.

Here's an example(bemjson):

{
  block : 'row',
    content : [
      {
          elem : 'col',
          mods : { sw : 4, mw : 2, lw : 2, xlw : 2 },
          content : [
              {
                  block : 'footer', // determines the parent element
                  elem : 'age',    // identifies the child element
                  content : [
                      {
                          block : 'icon',
                          mods : { type : 'some-icon' }
                      }
                  ]
              },
          ]
      },
  ]
}

You can view the resulting html in the 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 with modifiers
    <div class="footer__age"> // child element age under parent footer block
      <i class="icon icon_type_some-icon">
        <svg></svg>
      </i>
    </div>
</div>

The css is structured like this(elements are typically in a 2-level hierarchy):

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

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

For more information, visit the official BEM website:

Answer 2

Quick response.

Each block contains either an element or another block

Therefore, every element is assigned a class like block-name__elem-name - without any additional classes.

Every block has its own namespace.

To customize the appearance of a block or element in BEM, use a modifier.

Here's how it works: html + css - check it out below

BEM is also a set of technologies with its own template engine. You don't have to write plain html - it's automatically compiled.

Here's an example(bemjson):

{
  block : 'row',
    content : [
      {
          elem : 'col',
          mods : { sw : 4, mw : 2, lw : 2, xlw : 2 },
          content : [
              {
                  block : 'footer', // determines the parent element
                  elem : 'age',    // identifies the child element
                  content : [
                      {
                          block : 'icon',
                          mods : { type : 'some-icon' }
                      }
                  ]
              },
          ]
      },
  ]
}

You can view the resulting html in the 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 with modifiers
    <div class="footer__age"> // child element age under parent footer block
      <i class="icon icon_type_some-icon">
        <svg></svg>
      </i>
    </div>
</div>

The css is structured like this(elements are typically in a 2-level hierarchy):

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

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

For more information, visit the official BEM website:

Answer 3

Answer №2

Perhaps leaning more towards this approach could be a slightly better option, although it still may not be ideal:

<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 use of the "profile__attribute" class may not be entirely necessary. It could be useful if you plan to apply consistent styles to all those attributes.

It seems like there might be some confusion about the intended use of the BEM 'modifier.' The correct format involves two hyphens, and modifiers are typically used for different variations of the same element. For instance, if you have a button with large and small versions, you could use button--large and button--small. In this case, the name, author, and date could be seen as separate elements rather than variations of one.

Ultimately, there isn't a definitive right or wrong approach to BEM. It often comes down to personal preference and adherence to coding style guides.

Answer 4

Perhaps leaning more towards this approach could be a slightly better option, although it still may not be ideal:

<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 use of the "profile__attribute" class may not be entirely necessary. It could be useful if you plan to apply consistent styles to all those attributes.

It seems like there might be some confusion about the intended use of the BEM 'modifier.' The correct format involves two hyphens, and modifiers are typically used for different variations of the same element. For instance, if you have a button with large and small versions, you could use button--large and button--small. In this case, the name, author, and date could be seen as separate elements rather than variations of one.

Ultimately, there isn't a definitive right or wrong approach to BEM. It often comes down to personal preference and adherence to coding style guides.

Tips on properly styling HTML using the BEM naming convention

Answer №1

Answer №2

Similar questions

text box with an immobile header

execute the function whenever the variable undergoes a change

I'm having issues getting my fancybox to display properly

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Animate with jQuery to swap the positions of two floating divs

What could be causing the lack of access to the prerender.io service in this particular setup?

Can the SVG def element be modified?

Create an input field with a dynamic and exclusive identifier using the DataTables plugin

Learn how to utilize ng-class to assign an ID selector to HTML elements

How can I view a comprehensive list of updates made to a webpage?

Iframe form submissions

The specified font-size in my CSS is being ignored by Chrome

Minimize the screen dimensions and adjust the margins accordingly

jquery unclean data, in need of the jquery ui popup dialog

I'm struggling with my project called "Number TSP" and I can't seem to figure out why it's not working properly

Guide on incorporating data from a text file into an HTML table

Utilizing JQuery slideToggle() to Toggle Between Opening and Closing Multiple Divs

Locating all elements on a webpage that are either above or below a specific element, capturing those that intersect visually

Problem involving non-breaking spaces

Converting JSON data retrieved from a URL into HTML format