Hello,
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 01
, 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"
.card-01.card_theme_01 {}
class="card card-01 card-01_theme_01"
.card-01_theme_01 {}
class="card-01 card-01_theme_01
class="card-01__image
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>
card_type_football
card_type_baseball
card_type_fanart