BEM слишком много занятий?

Question

Я слежу за методологией BEM, и я не уверен, что я делаю это правильно, так как в конце концов я получаю довольно много уроков. Я хочу, чтобы мой код был модульным и многоразовым, поэтому я начал использовать mixins и placeholders. Но в некоторых случаях я в конечном итоге с кодом вроде этого:

иметь код для повторного использования я есть, например, следующий SCSS:

класс конкретных СКС файл:

.l-page-width { 
    display: inline-block; 

    &_background_white { 
    @extend %background_white; 
    } 

    &_padding_bot-top { 
    @extend %padding_bot-top; 
    } 

    &_center_absolute { 
    @extend %center_absolute; 
    } 
} 

Заполнитель:

%background { 
    &_white { 
    background: $white; 
    } 
} 

%padding { 
    &_bot-top { 
    padding-bottom: span(.35); 
    padding-top: span(.35); 
    } 
} 

%center { 
    &_absolute { 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
} 

HTML

<div class="l-page-width l-page-width_background_white l-page-width_padding_bot-top l-page-width_center_absolute"> 

<div class="c-quote c-quote_padding_lr"> 
      <h1 class="c-quote__title c-quote__title_outline_black"> 
       Title Here 
      </h1> 
      <p class="c-quote__content"> 
       content text here 
      </p> 
     </div> 
</div> 

я был снова чтение BEM информации сайта и придумали, что и делает гораздо больше смысла в настоящее время:

<div class="l-page-width"> 
    <div class="l-page-width__c-quote c-quote"> 
     <h1 class="c-quote__title c-quote__title_outline_black"> 
      Title Here 
     </h1> 
     <p class="c-quote__content"> 
      content text here 
     </p> 
    </div> 
</div> 

СКС:

.l-page-width__c-quote { 
    @extend %background_white; 
    @extend %padding_bot-top; 
    @extend %padding_lr; 
    @extend %align_center; 
} 

Я

Answer 1

Не пытайтесь сделайте свой код сложным, не пытайтесь использовать тонны или помощники, mixins и так далее. Попробуйте написать простой и вседостаточный код.
l-page-width__c-quote c-quote - этот селектор говорит что-нибудь о элементе. Я даже не представляю, что это такое. Не пытайтесь назвать классы таким образом, чтобы они описывали внешний вид элемента. Идеальные имена классов: news, news__title, news__date и так далее.
Не используйте свои пользовательские префиксы - никто, кроме вас, не знает, что они означают.
Нет ничего плохого, чтобы написать тот же код дважды. Гораздо хуже, когда вам нужно изменить один из двух блоков, сделанных из тех же миксинов или заполнителей, или попытаться понять, почему какой-то элемент имеет этот внешний вид.

Я не призывал отказаться от микшинов или заполнителей. Нам просто нужно использовать их экономно.