vintem vintem - 2 months ago 8
CSS Question

How would I name these nested elements using BEM?

So I have a page like so:

<div class="dashboard">
<div class="dashboard-item">
<div class="dashboard-item__header">
<span class="dashboard-item__header__icon dashboard-item__header__icon--modifier"></span>Header Title
</div>
<div class="dashboard-item__content">
<p class="???"></p>
</div>
</div>
</div>


I have a dashboard that is my container and it can have different items. An item then has a header and some content, but that item will always be in the dashboard. So, should I really name it dashboard__item ?

Also, what about the nested elements like the header and content? Should they use the name dashboard__item__header?

I've read that we should not have nested names like that, but that header should not exist on its own, nor the dashboard item.

So how should I name a case like that?

And in the content, if I have some elements that should look different because they're inside a dashboard item?

Answer

should I really name it dashboard__item ?

It depends. If all the items inside dashboard are very similar and quite simple it's just fine to go with an element of dashboard. But if they are different or complicated, you may consider to create separate blocks for each kind of possible items and optionally mix them with dashboard__item for positioning purpose (see https://en.bem.info/methodology/faq/#mixes).

Should they use the name dashboard__item__header?

No, use something like dashboard__item-header. See https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

if I have some elements that should look different because they're inside a dashboard item?

See second part of this answer https://en.bem.info/methodology/faq/#why-should-i-avoid-using-nested-selectors

PS: You hit 3 questions from our FAQ in one post! ;)