Methodology BEM + Lost Grid

Question

I would like to know what would be the best practice to use different grid sizes with the same block.

Ex:

• I have a component Card, and on my Dashboard page I wish I had 4 Cards per line
• I also use this component elsewhere, on the users page, I wish to display 2 cards per line

In case I would have:

// dashboard.html

| Card1 | Card2 | Card3 | Card4 |
| Card5 | Card6 | Card7 | Card8 |

// users.html

|     Card1     |     Card2     |
|     Card3     |     Card4     |


// Estrutura

<div class="Card">
    <div class="Card__title">
        Meu titulo
    </div>
    <div class="Card__content">
        Meu conteúdo
    </div>
</div>

I thought of the following options:

// Card.scss

.Card {
    border: solid 1px black;
}

.Card__title {
    display: block;
    border-bottom: solid 1px black;
}

1. Create a custom components for each page

// Dash-cardgrid.scss

.Dash-cardgrid {
    > .Card {
            lost-column: 1/4;
    }
}

// User-cardgrid.scss

.User-cardgrid {
    > .Card {
            lost-column: 1/2;
    }
}

2. Create a component for each page

// Dash-card.scss

.Dash-card{
    @extend .Card;
    lost-column: 1/4;
}

// User-card.scss

.User-card{
    @extend .Card;
    lost-column: 1/2;   
}

3. Modifier

// Card.scss

.Card {
    ...
    &--four-by-row {
        lost-column: 1/4;   
    }

    &--two-by-row {
        lost-column: 1/2;   
    }
}
...

4. Create a Gris utility

// utils.scss

.utils {
    ...
    &--four-by-row {
        lost-column: 1/4;   
    }

    &--two-by-row {
        lost-column: 1/2;   
    }
}
...

5. Even use some grid of some framework (but the goal was to make html cleaner and simple to understand

Answer 1

I found the answer in this article:

http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/

Basically, I will create the components normally, and if I need to work with the grid at a specific location, I can create a module from the application part I’m working on and overwrite the component

<div class="my-module">
  <div class="my-module__child-component">
    <div class="child-component">
      <div class="child-component__grandchild-component">
        <div class="grandchild-component--modifier"></div>
      </div>
    </div>
  </div>
</div>