2017-03-08 40 views
0

私はBEM規則についていくつかの説明をしたいと思います。 2つの場所/ページregistrationdashboardで使用されるカードブロックがあるとします。私はかつてこのためscssを書き、その後、私はそれを必要な場所にそれを使用できるようにしたいと思いBEM:命名規則

<div class="card"> 
    <header class="cardheader"> 
    <h3 class="cardheader_title"> 
     Some Title 
    </h3> 
    </header> 

    <section class="card-body"> 
    <!-- this can contain other blocks. --> 
    <!-- for example a nav and a form. or simple an acticle --> 
    </section> 
</div> 

:カードの

HTML構造は次のようになります。例えば、登録ページを見てみましょう。

<div class="card registration-card"> 
    <header class="cardheader registration-cardheader"> 
    <h3 class="cardheader_title registration-cardheader__title"> 
     Some Title 
    </h3> 
    </header> 

    <section class="card-body registration-cardbody"> 
    <!-- this can contain other blocks. --> 
    <!-- for example a nav and a form. or simple an acticle --> 
    </section> 
</div> 

そしてダッシュボードのために同じことを繰り返します。私は上記の例

blockblock__modiferで働いています

<div class="card dashboard-card"> 
    <header class="cardheader dashboard-cardheader"> 
    <h3 class="cardheader_title dashboard-cardheader__title"> 
     Some Title 
    </h3> 
    </header> 

    <section class="card-body dashboard-cardbody"> 
    <!-- this can contain other blocks. --> 
    <!-- for example a nav and a form. or simple an acticle --> 
    </section> 
</div> 

acceptable BEMアプローチの上ですか?

答えて

2

はい、それは間違いなく許容されており、はBEM方法論のと呼ばれています。詳細については、https://en.bem.info/methodology/key-concepts/#mixを参照してください(公式の文書では、異なるセパレータが使用されているので、混乱しないように注意してください)。