我正在学习 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
设置样式?
最佳答案
我想你可以在这里找到一些线索 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-->
关于html - 由父 block 专门设置多个使用 block 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50855302/