I was exploring BEM and how could I apply it to my future projects.
Let's say I have 3 widgets, each one containing multiple styles. I name the widgets
Card 02 and
Card 03, they are similar but not the same, some input fields are different and I might create even more, that's why I chose to name them using numbers.
The html looks like this, what's inside
card__content is different from a card to another, and the card have about 3 themes, my question is how should I add those differential classes?
<div class="card"> <img class="card__image"> <div class="card__content"> ... </div> </div>
There are few options and I can't decide.
class="card card-01 card_theme_01"
class="card card-01 card-01_theme_01"
Or I can even turn the elements into blocks, an advance would be really helpul.
<div class="card-01 card_theme_01"> <img class="card-image"> <div class="card-content"> ... </div> </div> <div class="card-01 card-01_theme_01"> <img class="card-image"> <div class="card-content"> ... </div> </div>