1

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?

Robbert
  • 1,270
  • 6
  • 30
  • 62

1 Answers1

0

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-->
PIIANTOM
  • 1,311
  • 11
  • 20
  • Thanks for you answer. I know there are many variations, but I am trying to find a decent one. In the last documentation of BEM they declare modifiers as follows: `.nav_navbar` instead of `.nav--navbar`. What do you think? – Robbert Jun 14 '18 at 12:01
  • 1
    Very true. As a matter of fact, I still prefer the `--` modifier notation instead of the `_` notation one. First because I find the CSS code readability easier this way (sometimes, not that easy to distinguish a `__` from a `_`). Secondly because on some CSS code legacy, you can find some `_` separator without any BEM purposes. – PIIANTOM Jun 14 '18 at 18:48
  • Just a matter of preference, but the BEM guidlines suggest nesting for modifiers, so you dont need `nav__item--navbar` on your `
  • `'s, instead in css reference `.nav--navbar nav__item{}`. The benefot of this becomes clear when you toggle modifiers with javascript
    • – Steve Jun 15 '18 at 21:53