css - 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类添加到每个社交列表中。

每个社交块都有不同的样式，我们不能只social在 css 文件中使用类。

所以我不需要将块类添加到社交并且只使用元素类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>