由父块专门设置多个使用块的样式

Question

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

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

<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 块位于 .navbar 内。我应该添加哪个类来专门为 .navbar 栏内的 .nav、.nav__item 和 .nav__link 设置样式？

Answer 1

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

首先，BEM 有很多写法，所以你不会有正确答案。

在你的例子中，root .navbar 可以被视为一个修饰符（而不是一个块，因为你的块已经被定义为 .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-->

由父块专门设置多个使用块的样式

Style multiple used block specifically by parent block

html

css

modularity

bem