I'm interested in how to solve the problem of names for classes. For example I have 30+ options for the first section (hero). They have different structure and different blocks inside.
On the one hand they are completely different blocks, their styles can be radically different from the first variant. From the user's side it looks like a variation of a block.
I am inclined to call these sections as such:
But such a large number of new classes is just confusing. On the other hand, I don't want someone to accidentally change the styles of all containers, but only the one used inside this section.
I want to figure out what's best to use for variation names with different structures.
BEM doesn't approve using non-descriptive class names like .hero01, you're doing the right thing asking such questions.
If I understood your dilemma correctly, I'd recommend using BEM mixes. Meaning, you may mix different class names on one node.
Move common styles that all of your hero variants have to one class, let's call it .hero for simplicity — I believe there wouldn't be much, maybe some similar paddings, display, positioning, text properties, default background... You name it.
Then create as many classes as you need for styling all the hero variants.
hero at all — imagine that you'll be able to reuse this structure in another place, so name them meaningfully, for example: .picture-text, .video-hero, .slider..hero thing (so their description should go after .hero class, not before).<section class="hero slider"> — thus both sets of CSS rules will be applied to one element.<section class="hero picture-text">
<div class="hero__container picture-text__container">
<h2 class="picture-text__title">Title</h2>
...
</div>
</section>
Don't forget to make your markup and styling flexible and adjustable. This way you'll be able to simply insert, let's say, different number of text blocks or images to the same container — and the UI won't break and require immediate major refactoring.
Hope it helps! Let me know any questions.