Style multiple used block specifically by parent block

Question

I am learning about BEM (CSS) methodology and am not sure about the following example:

Suppose I am building a navigation block which I want to use in a navigation bar and also on other places on the page.

<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-->

In the example above you can see the .nav block is placed inside the .navbar. Which classes should I add to style the .nav, .nav__item and .nav__link inside the .navbar bar specifically?

Answer 1

I guess you could find some clues here BEM block, naming & nesting

First of all, BEM has a lot of writing variations, so you won't have THE right answer.

In your case, root .navbar could be considered as a modifier (instead of a block, as your block is already defined as .nav. In that case, you could sufix some new classes with --navbar So you could end with something like this

    <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-->