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（请注意，在官方文档中使用了不同的分隔符，因此请勿混淆）。