BEM：命名約定

Question

我想對BEM約定做一些說明。假設我有一個卡塊，將在兩個地方/頁面registration和dashboard中使用。

卡片HTML結構看起來是這樣的：

<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> 

我還想寫scss這一次，然後就可以無論我需要它來使用它。那麼讓我們以註冊頁面爲例。

<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> 

然後再重複的儀表板相同：

<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> 

我只是在上面的例子中block和block__modifer工作

是AN acceptable BEM方法上面？

Answer 1

是的，這是絕對可以接受的，在BEM方法中稱爲混合。有關詳細信息，請參閱https://en.bem.info/methodology/key-concepts/#mix（請注意，在官方文檔中使用了不同的分隔符，因此請勿混淆）。