1
\$\begingroup\$

I've recently learned BEM & SASS, and I'd like to know if my BEM syntax is correct. I'm trying to create just the header of this page: https://blackrockdigital.github.io/startbootstrap-agency/

Are there any differences you would make to my class names? I get very confused about how to deal with elements when they are nested within other elements. I find that I often want to chain elements, like class="header__navbar__logo", but I've heard this is not good BEM.

<header class="header">
    <div class="header__navbar">
        <div class="container">
          <h1 class="header__logo">Start Bootstrap</h1>
          <ul class="header__navigation">
            <li class="header__nav-item"><a class="header__nav-link" href="#">Services</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Portfolio</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">About</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Team</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Contact</a></li>
          </ul>
        </div>
    </div>

    <div class="header__content">
      <h1 class="heading-primary">
        <span class="heading-primary--main">Welcome To Our Studio!</span>
        <span class="heading-primary--sub">It's Nice To Meet You</span>
      </h1>
      <a class="btn btn-yellow" href="#"></a>
    </div>
  </header>
```
\$\endgroup\$
  • \$\begingroup\$ In my opinion, the real question you should ask yourself is "do I really need all these class selectors". Only declare IDs and classes when you need them. I think using class names for the <li> AND the <a> tags is not necessary. \$\endgroup\$ – Dennis Fink May 12 '19 at 1:44
2
\$\begingroup\$

Well, if you are using Bootstrap, you should not alter the classes that Framework is using, like navabar for example.

The basic with BEM is that you should chain classes in a way to create a meaningful hierarchy, like in a component, where you have an object that contains everything else. Like that you leverage SASS nesting to create a component-like structure.

For example:

<header>

  <navbar class="navigationBar navbar">
    <div class="container">
      <div class="navigationBar--logo"></div>
        <ul class="navigationBar--navigation">
          <li class="navigationBar--navigation--item">
            <a class="navigationBar--navigation--item--link" href="#">Item-1</a>
            <a class="navigationBar--navigation--item--link" href="#">Item-2</a>
            <a class="navigationBar--navigation--item--link" href="#">Item-3</a>
          </li>
        </ul>
      </div>
    </div>
  </navbar>

 <section class="content">
    <div class="container">
      <div class="content--heading--primary">
        <span class="content--heading--primary--main">Welcome To Our Studio!</span>
        <span class="content--heading--primary--sub">It's Nice To Meet You</span>
     </div>
   </div>
 </section>

</header>

In this case the SASS will be:

.navigationBar {
    width:104px;
  
    &--logo { width:103px; }
    &--navigation {
      width:102px;
      
        &--item {
          width:101px;
          
            &--link {width:100px; } 
        }
    }
}


.content {
  width:100px;
  
  &--heading--primary {
    width: 101px;
    
    &--main { width: 102px; }
    &--sub { width: 103px; }
  }
}

Check the SASS code with SassMeister (https://www.sassmeister.com) to see how it turns to CSS

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.