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>

    <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>
      <a class="btn btn-yellow" href="#"></a>
  • \$\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

Your Answer

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

Browse other questions tagged or ask your own question.