Which Bootstrap Grid Classes Should You Choose?

Question

css

Recently I have been making up without frameworks, but now I decided to return to the bootstrap grid again. In connection with this, a question arose.
I adhere to the BEM methodology in layout, and adding bootstrap classes to the block in the html itself seems completely unreasonable, inappropriate, plus quite poor aesthetically.

<div class="class__element col-xs-12 col-sm-6 col-md-3"></div>

In addition, when using SCSS and the susy grid, I got used to this, in my opinion, more reasonable design:
<div class="class__element"></div>

.class__element{
  @extend .col-md-3;
  @extend .col-sm-6;
  @extend .col-xs-12;
}

What do you think? Which way is more reasonable?

Answer 1

The second way is more than reasonable.
Only perhaps you should think about using mixins instead of extending classes, and throwing out the grid altogether (well, here you need to evaluate the benefits received in a particular project).

.class__element {
    @include make-sm-column(3);
}

I also saw this layout
Like a visual grouping of classes by meaning.

Answer 2

The second one is much nicer. Only on the condition that "coders" will not look into the layout in order to quickly display new information by analogy with the old one =) They will go crazy))