Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Code em HTML - Classes muito extensas

por Erik Filgueira Duarte
| 168k xp | 48 posts

Estou fazendo um dos cursos iniciais em HTML e CSS e me deparei com o seguinte:

<h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="apresentacao__conteudo__titulo__destaque">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <a href="https://www.instagram.com">Instagram</a>
            <a href="https://www.github.com">GitHub</a>

Meus nomes de classes estão muito longos como o código: 

class="apresentacao__conteudo__titulo__destaque"

Continuar mantendo o código desta maneira ainda é uma boa prática?

1 resposta
solução!
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Erik, como vai?

Ótima pergunta!

É ótimo ver que você está se dedicando a aprender HTML e CSS! Quanto à sua pergunta, é importante lembrar que nomes de classes devem ser descritivos e autoexplicativos, para que outras pessoas possam entender facilmente o que está acontecendo no código.

No entanto, nomes de classes muito longos podem tornar o código difícil de ler e de escrever. Uma boa prática é tentar manter os nomes de classes curtos e objetivos, mas sem perder a clareza.

No seu exemplo, uma alternativa seria usar apenas "conteudo" como nome de classe, já que o elemento ao qual ele se refere já está dentro da classe "apresentacao__conteudo". Dessa forma, o código ficaria assim: 

<h1 class="conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo__destaque">com um Front-end de qualidade!</strong></h1>
<p class="conteudo__texto"></p>

Dessa forma manteríamos um padrão de 2 palavras apenas, a primeira que define a tag pai e a segunda que define a tag filha.

Deixo como recomendação o seguinte artigo sobre CSS e boas práticas:

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!