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>

Css bem块内部块命名

1 个答案: