html - 由父 block 专门设置多个使用 block 的样式

Question

我正在学习 BEM (CSS) 方法，但不确定以下示例:

假设我正在构建一个导航 block ，我想在导航栏和页面的其他地方使用它。

<div class="navbar">

   <ul class="nav">
      <li class="nav__item"><a href="#" class="nav__link"><?php _e( 'My account', 'phytoreform' ); ?></a></li>
      <li class="nav__item"><a href="#" class="nav__link"><?php _e( 'Log in', 'phytoreform' ); ?></a></li>
   </ul><!--End .nav-->

</div><!--End .navbar-->

在上面的示例中，您可以看到 .nav block 位于 .navbar 内。我应该添加哪些类来专门为 .navbar 栏内的 .nav、.nav__item 和 .nav__link 设置样式？

Answer 1

我想你可以在这里找到一些线索 BEM block, naming & nesting

首先，BEM 有很多写法变体，因此您不会有正确答案。

在您的情况下，根 .navbar 可以被视为修饰符(而不是 block ，因为您的 block 已经定义为 .nav。在这种情况下，您可以使用 --navbar 为一些新类添加后缀所以你可以这样结束

    <div class="navbar">
   <ul class="nav nav--navbar">
      <li class="nav__item nav__item--navbar"><a href="#" class="nav__link nav__link--navbar"><?php _e( 'My account', 'phytoreform' ); ?></a></li>
      <li class="nav__item nav__item--navbar"><a href="#" class="nav__link nav__link--navbar"><?php _e( 'Log in', 'phytoreform' ); ?></a></li>
   </ul><!--End .nav-->

</div><!--End .navbar-->