BEMを使ったhtml-markupのクラスが少なくなった

Question

html-markupからすべての連鎖クラスを取得しようとしています。その後、私は私のCSSファイル内のすべての私のスタイルを持っていると私はいくつかの要素がスタイルされたかを確認するために私のhtmlの内部を見るためにやりなさいとマークアップは...だから代わりに...

ずっときれいに見えるので

<a class="btn btn--blue btn--large"> 

...私は持っている...

<a class="[block-name]__btn"> 

...と私のCSS内で、私はこれを持っています。

.[block-name] 
    &__btn{ 
     @extend %btn; 
     @extend %btn--blue; 
     @extend %btn--large; 
    } 

これは良いアプローチですか？

と私は組み合わせて別のブロックとブロックを持っている場合、私は二つの方法

A）

<div class="register"> 
    <div class="form register__form"> //order is important if i want to use a modifier on the block form 
     <div class="form__row"> 
      <input type="text" class="form__input"/> 
     </div> 
     <div class="form__row"> 
      <input type="submit" class="form__button" label="Jetzt Registrieren"/> 
     </div> 
    </div> 
</div> 

はCSS

.register{ 
    &__form{ 
     margin-top: 60px; 
     @extend %form--blue; 
    } 
} 

%form, 
.form{ 
    &--blue{ 
     .form__input{ 
      @extend %textfield-pill--blue; 
     } 
     .form__button{ 
      @extend %btn-pill--blue; 
     } 
    } 

    .form__row{ 
     margin-top: 20px 
    } 

    .form__input{ 
     @extend %textfield-pill; 
    } 

    .form__button{ 
     @extend %btn-pill; 
    } 
} 

Bがあると思います） 私はクラスを削除しますフォーム...

<div class="register"> 
    <div class="register__form"> //removed class form 
     <div class="form__row"> 
      <input type="text" class="form__input"/> 
     </div> 
     ... 

...私のCSSに追加してください。

.register{ 
    &__form{ 
     margin-top: 60px; 
     @extend %form; 
     @extend %form--blue; 
    } 
    } 

何が良いと思いますか？ A）は、モジュールのフォームが始まる場所を良く見せてくれますが、クラスが多く、順序は重要です。B）よりクリーンなマークアップの方法に従いますが、フォーム>フォーム__rowを表示しません。

コード例の例 https://codepen.io/destroy90210/pen/rLQKOP

Answer 1

これは良いアプローチですか？

はい、絶対に。

何が良いと思いますか？ A）は、モジュールのフォームが始まる場所を良く見せてくれますが、より多くのクラスを持ち、順序は重要です。B）よりクリーンなマークアップの方法に従いますが、フォーム>フォーム__rowを表示しません。 BEMの方法論は間違いなくAに関するものです。ミックスと呼ばれています。詳細については、https://en.bem.info/methodology/key-concepts/#mixおよびhttps://en.bem.info/methodology/faq/#mixesを参照してください。