Css bem 嵌套block命名

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

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

所以我不需要将 block 类添加到社交中，只使用元素类 site-header__social，但是如果我希望它成为 block 类怎么办？有人建议按 block 类命名吗？谢谢。

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>