What to do when the Block element in a BEM component doesn't need any styles?

Question

Let's say I have a structure like this:

<article class="product">
  <header class="product__header">
    <h1 class="product__headline">Headline</h1>
    <img class="product__hero" src="" alt="">
  </header>

  <p class="product__description">Content</p>
</article>

As the Block element article brings all the styles it needs by default, it actually doesn't have any CSS. So I'm not defining it in the CSS like this, because it only clutters the styles:

.product { }

But I'm unsure about the HTML. Should it be

<article class="product"></article>

… anyways or simply …

<article></article>

… as there are no styles attached?

What is the right thing to do when usin BEM?

Answer 1

As I understand it, the idea with BEM is to use a standard and have a markup ready for any present or future CSS, so you would always include the class, even if you don't use it right now.

Another good reason is that the parent class improves readability and order for anyone looking at the markup. I would even suggest you to include the class in your CSS and left it blank, functioning almost like a subtitle, with the potential to be useful later on.

Finally, BEM recommends against nesting elements in the stylesheet, which means preferring the use of classes even in the smallest children (like a strong tag inside a p). Seems natural, then, to have a class in the parent as well.

Answer 2

Keep the class to keep your independence. Future changes might require you style . This approach has several advantages:

1. In 2 months you'll still be able to determine the module components and structure without further ado
2. You and everybody else will know that is the component container even if you add further wrapping elements in-between.
3. You might be able to alter the layout without touching the HTML
4. No dependency between HTML semantics and layout.
5. All present structure is mirrored into the layout so you can see all variants and elements in the CSS. Get things out of your head

Finally, I agree with you that CSS clutter isn't nice but it could be useful, especially when you're working on a larger codebase with a larger team where you need to rely on standards. On your parser/IDE: it will probably be configurable to ignore such entries. Your build process should be able to remove these empty selectors so it doesn't make its way into production CSS.

Answer 3

I have come across a similar scenario, If you are following BEM, then keep that class in the article element, since it will help in maintenance(such as removing unused styles, better understand markup).

for example(in product.scss):-

.product {
    &__header {
      font-size: 1.7rem
      // etc...
    }
 }

Hope this helps. Happy coding....

Note:- Depends upon your markup, you can hoist block element class responsibility to the parent element and updated child class with new parent class.(eg:- .root__prdHeader)