1
resposta

[Dúvida] Por que não usar somente uma classe no header?

Por que precisamos criar classes para

, e no cabeçalho?
Não poderíamos criar apenas a classe "cabecalho" e colocar tudo lá?
Eu fiz isso só para testar e os dados referentes à fonte, tamanho e peso, funcionaram.
Mas color e text-decoration não funcionaram.

Minha dúvida deve-se ao seguinte:
Entendo que se deva criar classes separadas para os elementos interiores (dentro de a) se eles forem diferentes, mas se são iguais em tudo, porque fazer isso?

E também, porque color e text-decoration não funcionaram?

1 resposta

Olá, Daniel!

Obrigado por compartilhar sua dúvida no fórum

Vamos por partes.

Por que criar classes separadas no cabeçalho?

No código do curso, o padrão utilizado segue uma metodologia de organização (como o BEM – Block, Element, Modifier). Nesse padrão:

  • cabecalho é o bloco (o componente principal);
  • cabecalho__menu é um elemento dentro do bloco;
  • cabecalho__menu__link é um elemento ainda mais específico.

Isso não é obrigatório, mas traz alguns benefícios importantes:

  • Organização e legibilidade do código;
  • Facilidade de manutenção, principalmente em projetos maiores;
  • Evita conflitos de estilos com outros links da página;
  • Deixa claro onde aquele estilo deve ser aplicado.

Em projetos pequenos, pode parecer “exagero”, mas em aplicações reais isso faz muita diferença.

“Mas se os links são iguais, por que separar?”

Mesmo que hoje eles sejam iguais, amanhã podem não ser. Criar classes específicas deixa o código preparado para mudanças futuras sem quebrar outras partes do site.

Além disso, separar responsabilidades é uma boa prática:
o header cuida da estrutura, o nav da navegação, e o a do link em si.

Por que color e text-decoration não funcionaram?

Isso acontece porque o navegador aplica estilos padrão aos links (<a>), como:

  • color azul
  • text-decoration: underline

Se você aplicar esses estilos apenas no .cabecalho, eles não substituem automaticamente os estilos específicos do <a>. Por isso, propriedades como color e text-decoration precisam ser aplicadas diretamente no link ou em um seletor mais específico.

Por exemplo, isso funciona:

.cabecalho a {
  color: white;
  text-decoration: none;
}

Ou, usando a classe específica:

.cabecalho__menu__link {
  color: white;
  text-decoration: none;
}

Já propriedades como fonte, tamanho e peso podem funcionar por herança, mas text-decoration não é herdado, e o color pode ser sobrescrito pelo estilo padrão do navegador.

Conclusão

Você pode, sim, fazer tudo apenas com:

.cabecalho a { ... }

Mas usar classes específicas:

  • melhora a organização,
  • evita efeitos colaterais,
  • segue boas práticas do mercado,
  • e facilita a evolução do projeto.

Continue testando e questionando — esse tipo de dúvida mostra que você está realmente entendendo o que está fazendo.
Abraços e bons estudos! ✨