Adding BEM classes to html TAG

Question

Adding BEM classes to html TAG

148 Views Asked by vadelbrus At 23 July 2020 at 19:02

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 :)

Original Q&A

There are 2 best solutions below

**Citrullin** · Answer 1 · 2020-08-17T21:49:00.980000

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.

**Himanshu Saxena** · Answer 2 · 2021-05-11T20:51:54.590000

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

There are 2 best solutions below

Related Questions in CLASS

Related Questions in METHODOLOGY

Related Questions in BEM

Trending Questions

Popular # Hahtags

Popular Questions