Adding BEM classes to html TAG

Question

Recently I started learning BEM methodology and I'm struggling with one thing, to wit: if I code webpage using BEM should I use BEM classes in every html TAG or only there where in my opinion they are useful? Let's say we have this piece of code:

<ul class="menu__item-list">
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon" src="" alt="">link-1</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon" src="" alt="">link-2</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon"src="" alt="">link-3</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon"src="" alt="">link-4</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img class="menu__icon"src="" alt="">link-5</a></li>
        </ul>

or can I drop menu__icon class from if I don't need this and leave it like that:

<ul class="menu__item-list">
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-1</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-2</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-3</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-4</a></li>
            <li class="menu__item"><a class="menu__link" href=""><img src="" alt="">link-5</a></li>
</ul>

I've checked many different websites and one of them have almost every TAG in BEM but others only some selected TAGs so I'm a little bit confused ;) Please help :)

score 0 · Answer 1 · answered Aug 17 '20 at 21:49

If it is an icon it is best practice to also give it the corresponding CSS class. So your first solution seems to be right. Maybe you want to give it an own block, so you are able to use it in another context. I think that would make sense in the case of an icon.

score 0 · Answer 2 · answered May 11 '21 at 20:51

To add class for every HTML Element is kind of good to have practices. However, its not always mandatory to add a class every HTML Tag while using BEM Standards.

For example, consider you are having an accordion which always contain top heading and some content into it. In this scenario you no need to have class on h4 or on p tag every time. However, I still believe its completely scenario basis and how you well, organised or scale-able component you want to create.

Below is some code example: Have written the code in SCSS for better understanding, however, the actual CSS code below has been commented purposely if anyone want to test it can test it.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  
  &__panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  }
  
  & .active,
  &::hover
  {
    background-color: #ccc; 

  }
}

/*
.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion__panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
*/

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="accordion__panel">
<h4> Content Heading 1 </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="accordion__panel">
<h4> Content Heading 2 </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="accordion__panel">
<h4> Content Heading 3 </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


</body>
</html>

Adding BEM classes to html TAG

2 Answers2