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