How to name multiple similar widgets

[ghost]

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.

1. class="card card-01 card_theme_01" .card-01.card_theme_01 {}

2. class="card card-01 card-01_theme_01" .card-01_theme_01 {}

3. 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>

[qfox]

• card_type_football
• card_type_baseball
• card_type_fanart