Correct way of nesting blocks inside a block

Here's example:

<div class="rate-calc">
  <div class="rate-calc__internet internet">
    <div class="internet__title">Some title</div>
    <div class="internet__text">Lorem ipsum dolar sit amet</div>
  </div>
</div>

Is it correct BEM usage? Nesting block in a block still seems unclear for me.

6 years ago

tadatuta

@heihachi88 Yes, that's the right way.

6 years ago

avxkim

@tadatuta thanks, rate-calc__internet means that i can't reuse that block anywhere, but only inside rate-calc, right?

Also why some people using a single dash instead of underscore, when referring to an modificator, e.g.: rate-calc__internet-active, shouldn't it be like so: rate-calc__internet_active?

6 years ago

tadatuta

rate-calc__internet means that i can't reuse that block anywhere, but only inside rate-calc

yes

why some people using a single dash instead of underscore

There are few different naming conventions and all of them are valid. See https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes

6 years ago

ghost

<nav class="navbar">
  <ul class="navbar__menu menu">
    <li class="menu__item"><a class="?" href="#"> BEM <a></li>
  </ul>
</nav>

my question is:

<a class="menu__link">

<li class="menu__item item"><a class="item__link">

i think which "item" class only is to do a block to "link" and has no some other use...

In order to leave a comment you need to login.