Confusion with BEM naming conventions

I’m a bit confused as to how can I determine what is a Block and what is an Element in the BEM naming convention.

For instance, I have a row of products, and each product has image, title and price. So I realize that the products as one can be a block and each individual product can be an element. Yet when we go further down, it turns out that the product is a block as well, since it has other types of data. I end up with the following class naming:

.products
  .product__item
    .item__img
    .item__title
    .item__price

This does not seems entirely like BEM, so I don’t know what am I missing here?

Based on a quick scan of their documentation

  • a block is their name for a generic, reusable container.
  • An element is a quantifiable object which can be given specific, identifiable attributes. An element can contain other elements.

In quick and dirty html terms, a block is something you identify with a class. An element would be identified by their ids.

But BEM stays away from using IDs and relies on using only classes.

This is exactly why I do not like BEM or other complicated naming conventions. In all the time you’ve spent debating over naming conventions, I’d be much further along in the project.

3 Likes

A Block is the parent element of what you’re working on. They are the largest structures of your page.

What that means to your code, is whatever you want it to mean. BEM is really just a naming guide.

I just don’t like BEM because it results in class declarations that are so long they can wrap. And while they make it easier to understand what’s going on when you sit down and read them, BEM makes it very hard to skim or mentally process fast.

2 Likes

Yes, that too. That’s a great point too.

1 Like

The important detail I see is that a block is supposed to be “a functionally independent page component,” and an element “can’t be used separately from [a block].” So, for example, would an item title make sense outside the context of a product? Probably not. Would a product make sense outside the context of a product list? Hmm, actually yeah. A product could be used separately without the parent entity (the list), so product is a block.

Remember that element names aren’t supposed to nest. In my experience, the declarations hardly end up any longer than they would already be.

/* Non-BEM */
#ns-wrapper .button.active {}

/* BEM */
.ns-wrapper__button--active {}

Maybe I’m doing it wrong. But wouldn’t it be something more like:

<button class="ns-wrapper__button ns-wrapper__button--primary ns-wrapper__button--active">click me</button>

Yes, you’re right. I thought we were talking about a single class declaration in CSS, but of course if you have three of them on an HTML tag, then it’ll be longer.

That was more of what I was referring to. I really liked the idea of BEM, then I used it and hated it. I feel like one of those things that are really good idea in theory, but not in practice.

Either that or I’m just doing it totally wrong, which is entirely possible. :smiley:

BEM is a really great naming convention for modular web design.

Try this slight alteration to the BEM syntax if you don’t like the length:

blockName__elementName.-modifierName

That’s how I’ve been using BEM and it’s been working really well.

The camel case makes it easier to see where the names start and end.

The modifier class loses the module name but that can be a strength. It makes the class accessible to other modules further down the tree, it means all the child elements of the modifier have easy access to the class using .-modifierName & { … } syntax in Sass and it makes the HTML FAR cleaner.

BEM in combination with SASS/SCSS or Stylus - whatever you prefer is awesome.

  <article class="StandardArticle">
    <header class="StandardArticle__header">
      <h1>Blaaa</h1>
    </header>
    <div class="StandardArticle__body is--bold">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos repudiandae ullam ratione debitis ipsa non praesentium aperiam, tempora, ipsum ut sint voluptas possimus eius reprehenderit amet libero? Facilis, optio, maxime.
      </p>
    </div>
  </article>

And SCSS

.StandardArticle {
  &__header {
    color: green;
  }
  &__body {
    color: red;
    &.is--bold {
      font-weight: bold;
    }
  }
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.