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?

i think you have to add the class attribute anyway, however you can use a javascript that gives an empty class attribute to every element that doesn't have it — Giuppox, Oct 30 '20 at 11:08

score 6 · Answer 1 · answered Oct 15 '20 at 09:37

6

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.

answered Oct 15 '20 at 09:37

alotropico

1,904
3
16
24

2

Hm, I'm not sure about leaving the empty class definitions in the CSS. I have them but as comments. Otherwise the parser would raise a warning, that there's something cluttering the source. But I guess I'll keep the classes in the HTML to make the structure visible for now. – lampshade Oct 30 '20 at 10:20
1

Regarding your last point and readability, while BEM does recommend against nested selectors, sometimes it's more readable to use nested selectors in order to exclude repetitive class names (overkill) in the markup for simple cases like when you target
s within

z2lai

Mar 18 '23 at 19:50

score 4 · Answer 2 · answered Nov 04 '20 at 21:22

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

In 2 months you'll still be able to determine the module components and structure without further ado
You and everybody else will know that is the component container even if you add further wrapping elements in-between.
You might be able to alter the layout without touching the HTML
No dependency between HTML semantics and layout.
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.

score 0 · Answer 3 · answered Nov 06 '20 at 10:01

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)

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

3 Answers3