Is that compulsory to apply class name to each and every element in HTML while using BEM (Block,Element, Modifiers) naming convention?

Question

I am trying to put the BEM naming convention in action but having some confusions about naming the HTML elements. I really want to understand do I really need to provide the class name for each HTML element.

Let's say I have the following code and for example:

<ul class="nav">
    <li class="nav__list"><a href="#" class="nav__link>Home</a></li>
    <li class="nav__list"><a href="#" class="nav__link>Services</a></li>
</ul>

I don't want to apply CSS to the <li> elements. So, in that case, do I need to use the element name for the <li> tag. i.e. <li class="nav__list">...</li> ?

Can I just use the element name for the anchor tag without giving element name nav__list to the <li> element?

Here is what I am thinking to do because I don't want to apply styles to the CSS to <li>:

<ul class="nav">
    <li><a href="#" class="nav__link>Home</a></li>
    <li><a href="#" class="nav__link>Services</a></li>
</ul>

Thanks, One more thing I wanted to know how can I combine bootstrap classes and BEM classes maintaining the HTML readability? — Amit Kumar, Dec 27 '18 at 09:52
https://github.com/getbem/getbem.com/issues/152 check this link. — Arshiya Khanam, Dec 27 '18 at 10:01
check this one also https://stackoverflow.com/questions/49524254/how-to-properly-mix-bootstrap-and-bem — Arshiya Khanam, Dec 27 '18 at 10:03

score 3 · Accepted Answer · answered Dec 27 '18 at 09:34

first of all, you should have to follow BEM most of the developer followers BEM only because BEM is good at the naming convention and it's shows the standard naming convention for coding. it depends on you if you want to use BEM you can use or else it's your wish but I suggest you follow BEM it's good in standard.

you can use this

<ul class="nav">
  <li class="nav__list"><a href="#" class="nav__link>Home"></a></li>
  <li class="nav__list"><a href="#" class="nav__link>Services"></a></li>
</ul>

as well as this one

<ul class="nav">
  <li><a href="#" class="nav__link>Home"></a></li>
  <li><a href="#" class="nav__link>Services"></a></li>
</ul>

now you don't want to give style to li but in future client say you to give style to li that time what you will do again you will change the code so you have to use this below HTML code

<ul class="nav">
  <li class="nav__list"><a href="#" class="nav__link>Home"></a></li>
  <li class="nav__list"><a href="#" class="nav__link>Services"></a></li>
</ul>

Yes, I do wanna follow the BEM conventions. I want to know the best way to work with bootstrap and BEM simultaneously without any specificity issues. Thank you for the answer. — Amit Kumar, Dec 27 '18 at 09:55

Is that compulsory to apply class name to each and every element in HTML while using BEM (Block,Element, Modifiers) naming convention?

1 Answers1