Mix of BEM and bootstrap grids, is it readable?

Question

css

I came across a project with an atypical way of mixing BEM class naming and bootstrap grid. And according to the rules, there are no conflicts between grid styles and BEM block styles… But there are doubts about the readability of such logic.
Class types for positioning

• Global mesh classes: .containerand.row
  
• Class for a flex column inside .row: .<block>__col-<element>(attached to a BEM element, has no explicit logical binding to grid classes)
  

Example html structure:

<header class="page-header">
  <div class="container  page-header__container">

      <div class="row  page-header__row">
        <div class="logo  page-header__col-logo">…</div>
        <nav class="main-nav  page-header__col-menu">
          <ul class="main-nav__list">…</ul>
        </nav>
        <div class="page-header__col-email">
          <div class="page-header__email">…</div>
        </div>
      </div>
   
  </div>
</header>

css

• The mesh classes for a particular block are overridden by increasing the specificity by adding a class: .block__container.containerand.block__row.row
  
• The column class keeps the specificity always at the same level:.block__col-<element>
  
• Positioning classes include Bootstrap mixins.
  

For example, for the html above:

// Сетка
.page-header {
  &__container.container {}
  &__row.row {}
  &__col-logo {}
  &__col-menu {}
  &__col-email {}
}

// Оформление
.page-header__email {}

// Оформление вложенных блоков logo, main-nav — в отдельных файлах (без позиционирования)

BEM experts, tell me, is the logic visible? To support a monster with such a name, the documentation will be enough or worth rewriting to something more familiar and readable (separate positioning classes and grid markup on wrappers).

Answer 1

As for me, these are absolutely useless mixes:

<div class="container  page-header__container">
<div class="row  page-header__row">

There are only a couple of properties, why redefine them, create your own BEM blocks with the properties you need, in this case, just remove container and row.
This is not a mix at all:
either like this: page-header__logo
or with a key-value modifier: page-header__logo page-header__col_type_logo
The menu and the email are almost the same:
either page-header__main-nav
or still, if the emphasis is on col, then the key-value pair: page-header__col page-header__col_type_menu , or even better abstract page-header__col_size_small depending on what styles you are going to hang. ..
In general, even in such a code, you can define for yourself some kind of single standard, and you have everything mixed up contrary to the methodology ..

Answer 2

Some shitty code. Personally, I was horrified. It would be better if the author did it on a clean bootrap.

Answer 3

I am sometimes amazed by the originality of thinking of individual characters who manage to pervert the generally simple principles of BAM into something strange (to put it mildly). Here is one such example. And then they write articles on habr, what a bad bam :)

Answer 4

Somehow I tried to figure this out. An unreadable mess comes out. I agree with Alexey Nikolaev.

Answer 5

Learn sass/less
Use Type Constructs

.someblock
  @extend row

ruby.bvision.com/blog/please-stop-embedding-bootst...