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

Answer 1

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

首先，BEM有很多写作变化，所以你没有正确答案。

在您的情况下，根.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-->

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

1 个答案: