Css bem block inside block naming

Question

HTML layout

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

The layout just a example, we add social class to each of social list.

Each social block have different style, we can not just use social class at css file.

So i dont need add block class to the social and only use element class site-header__social, but what if i want it to be a block class? any suggest to name it by block class? thanks.

Answer 1

You may still call it social and also add a modifier to describe differences in styling. So it'd be like this:

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