Olá, venho tentar tirar uma dúvida com vocês, acontece que eu já percebi que a forma como os intrutores da Alura usam do padrão BEM para nomear classes é um pouco diferente do meu método de uso. Para melhor exemplificar, repare no código abaixo:
<div class="container">
<input type="checkbox" id="menu" class="container__botao">
<label for="menu">
<span class="cabeçalho__menu-hamburguer container__imagem"></span>
</label>
<ul class="lista-menu">
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Clássicos</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Esportivos</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Monster Truck</a>
</li>
<li class="lista-menu__item">
</ul>
</div>
Repare por exemplo que o elemento de lista desordenada tem um nome de classe "lista-menu". O correto não era ser "container__lista-menu"? Pois a lista desordenada está dentro da div "container". Outra observação: cada elemento de item de lista tem uma classe "lista-menu__item" e dentro de cada item de lista existe um elemento de âncora com uma classe "lista-menu__link". Ora! Se o elemento de âncora está dentro do elemento de item de lista, o nome correto de suas classes não deveria ser "lista-menu__item__link" ou "item__link" (para não ficar com o nome de classe muito grande)?
Outra dúvida que tenho é sobre qual nomenclatura usar para variáveis CSS? Será que eu devo usar apenas do bom senso para criar meus nomes de variáveis ou existe algum padrão de projeto CSS que auxilia nisso?
