Solucionado
Nas sections da tag main, temos os seguintes nomes:
class="principal"
class="mapa"
class="beneficios"
Porém, na hora de ler o código do CSS, eu fico com dificuldades em perceber de forma imediata de que se tratam de sections. Nesse caso, não haveriam nomes melhores para essas classes?
Exemplos: section-principal , section-mapa , section-beneficios
Esses nomes seriam uma má prática?
Oi, Bruno, tudo bem?
A section representa uma seção genérica contida em um documento HTML, usamos essa tag para quando vamos trabalhar com um conteúdo mais genérico. Não acredito que seja interessante trazer os nomes das tag para as classes pois deixa verboso. Com a familiaridade com o projeto, você vai adquirindo essa associação: a classse principal se trata da tag section e também de como as tag se comportam.
Eu uso palavras como container ou wrapper (que significa embrulho) quando tratamos de tags como div ou section que são genéricas e recebem conteúdos mais específicos, ou seja, dentro dessas sections há tags como nav, por exemplo, assim:
<section class="layoutWrapper">
<nav class= "navbar"></nav>
</section>Dessa forma, consigo me guiar para saber do que aquela classe se trata.
Espero ter te ajudado!
Fala ai Bruno, tudo bem? O problema de adicionar o prefixo das tag's nas classes é que você deixa o CSS muito amarrado ao HTML e isso não é legal, a ideia é que eles sejam o menos amarrados possível.
Então, respondendo a sua pergunta:
Esses nomes seriam uma má prática?
Sim, isso é uma má prática.
Existem N maneiras de nomear nossas classes em CSS, uma que eu gosto bastante é a BEM:
Segue alguns post's no meu blog sobre arquitetura CSS.
Espero ter ajudado.