How to properly implement an adaptive grid according to BEM?

Question

css

Hello.
I would like to know the opinion of professionals on the correct implementation of an adaptive grid using the BEM methodology.
What exactly is the question.
I know three methods:
1. Using special classes, like in bootstrap (col-sm-5, col-xs-5, etc.)
2. @mixin in preprocessors
3. @extend in preprocessors
For me personally, they all have their own cons and pros.
1. Classes speed up the layout, all the rules are in one place. But the html gets messy.
2. Mixins leave clean css and html, but increase the css file.
3. Inheritance makes css smaller, but messy because of the huge pile of selectors.
Which of these methods is more correct?

Answer 1

Option 1 is required. The fact that there are many classes does not play any problem. The main thing is to name them correctly, with meaning.

<div class="row">
<div class="col col12 collg6 colmd7 colsm8 colxsm12">

<div class="blockText"></div>

</div>
</div>

.row is a block with a grid, because i'm using flexbox, this is the main element
.col - column
.col12 - make default column width 12 out of 12
.collg6 - make column width at 1069 resolution 6 out of 12 (lg - large)
.colmd7 - make column width at 819 resolution size 7 out of 12 (md - middle)
.colsm8 - Make the column width at 569 resolution 8 out of 12 (sm - small)
.colxsm12 - Make the column width at 420 resolution 12 out of 12 (xsm - extra small)
It's very simple! And most importantly, convenient!

Answer 2

Mixins. The increase in the size of the final style file is not large enough to pay attention to.

Answer 3

I made one block - grid, example:

<div class="grid page__layout">
  <div class="grid__row">
    <div class="grid__col grid__col--xs-12 grid__col--md-4">...</div>
    <div class="grid__col grid__col--md-4 grid__col--lg-5">...</div>
  </div>
</div>