RU
botoba
botoba
28 March 2017

Hello, I just started with BEM and really like it. I just have an issue with the following code and hope someone can help me out.

This is my sample code

<nav class="books">
  <ul class="books__lists">
    <li class="books__items"><a href="/"  class="books__links">Sidebar link</a></li>
  </ul>
</nav>

How I am lost to what the link should really be called? Since the li is under the block of books_lists now sure what the link class should be?!
I have a design with a lot of different link styles, so is it better to have something like link-books?

Thank you and keep up the good work.
Jim.

tadatuta
#tadatuta
28 March 2017

@botoba
Hi, Jim!

Here's some things to know:

  1. There's no need to worry if an element is inside some other element so books__items is fine. See https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2 for reasoning.

  2. I'd say that class names in your case should be in singular: book, book__list, book__item and book__link. But if there is a wrapper for some similar items plural form is ok.
    For example:

    <ul class="items">
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
    </ul>
    
  3. Elements may have their own modifiers so you may go with <a href="/" class="book__link book__link_type_special"></a>.
  4. You may use mixes to separate concerns:
    <nav class="book">
     <ul class="book__list">
         <li class="book__item"><a href="/" class="link book__link">Sidebar link</a></li>
     </ul>
    </nav>
    

Pay attention to classes link and book__link on the same <a> node. So now you may style all the links on a page with the .link selector and add something special for links inside book block with .book__link.

For more info about mixes please see https://en.bem.info/methodology/css/#mixes

Hope this helps.

botoba
#botoba
28 March 2017

Hey Tadatuta, Thank you so much for the good write up and think I got it :) I think I went a little crazy with the nesting.

I have seen a lot of people who this:

<aside class="book-menu">
  <nav class="book-menu book">
 <ul class="book__list">
     <li class="book__item"><a href="/" class="link book__link">Sidebar link</a></li>
 </ul>
</nav>
</aside>

So book menu is the block and then the nav is the element with a ul and li inside. I am still reading the BEM documentation, but when it comes to adding a new block or nesting, is it best to add a new style after the element?

<div class="foo">
  <div class="foo bar">
    <div class="bar baz"></div>
  </div>
</div>
tadatuta
#tadatuta
28 March 2017

The example in your last comment is fine.

botoba
#botoba
28 March 2017

Sorry was editing my comment and added new code, which example did you mean? Can it also be link__book?

tadatuta
#tadatuta
28 March 2017

This piece is ok:

<aside class="book-menu">
  <nav class="book-menu book">
 <ul class="book__list">
     <li class="book__item"><a href="/" class="link book__link">Sidebar link</a></li>
 </ul>
</nav>
</aside>

As for your updated question the answer is "it depends" :)
You should always think about semantics.
Hope this part of documentation will make it clear: https://en.bem.info/methodology/css/#single-responsibility-principle

botoba
#botoba
28 March 2017

Perfect Tadatuta, appreciate the help :)