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