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

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

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

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>

Css bem 块内块命名

Css bem block inside block naming

css

bem