的CSS BEM块命名

Question

HTML布局

<div class="site-header"> 
    <ul class="site-header__social social"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="post"> 
    <ul class="post__social social"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="site-footer"> 
    <ul class="site-footer__social social"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

布局只是一个例子，我们添加social类各社会名单。

每个社交区块都有不同的风格，我们不能仅仅在css文件中使用social类。

所以我不需要添加块类社会和只使用元素类site-header__social，但如果我想它是一个块类？任何建议通过块类命名它？谢谢。

Answer 1

您仍然可以称之为social，并添加修饰符来描述样式的差异。所以它会是这样的：

<div class="site-header"> 
    <ul class="site-header__social social social_type_header"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="post"> 
    <ul class="post__social social social_type_post"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="site-footer"> 
    <ul class="site-footer__social social social_type_footer"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div>