Links under list items

Forum /

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.

8 years ago

tadatuta

@botoba Hi, Jim!

Here's some things to know:

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.
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>
```
Elements may have their own modifiers so you may go with <a href="/" class="book__link book__link_type_special"></a>.

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.

8 years ago

botoba

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>

8 years ago

tadatuta

The example in your last comment is fine.

8 years ago

botoba

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

8 years ago

tadatuta

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

8 years ago

botoba

Perfect Tadatuta, appreciate the help :)

In order to leave a comment you need to login.