Olá Matheus.
Tudo bem?
Provavelmente um erro de sintaxe que fica invisivel aos olhos.
As vezes perdemos horas tentando achar o problema e era apenas um espaçamento,uma virgula,etc.
Isso é muito comum de acontecer independente do seu nível de conhecimento e existem muitas extensões nas IDES que nos dão alertas sobre.
Mas nem sempre elas conseguem identificar um erro.
Vou te ajudar a entender o que pode ter acontecido e se é uma boa prática usar esse tipo de seletor.
- Especificidade e Seletores de Classe
Quando você usa seletores de classe, como h2.tópicos__título ou a.tópicos__link, você está aplicando um nível maior de especificidade do que se estivesse usando apenas uma tag, como h2 ou a.
O CSS funciona com base em "especificidade", ou seja, quando há múltiplas regras aplicando estilos ao mesmo elemento, a regra mais específica prevalece.
Por exemplo, se você tiver as seguintes regras CSS:
h2 {
font-size: 16px;
}
h2.tópicos__título {
font-size: 24px;
}
O h2.tópicos__título terá mais "peso" e vai prevalecer, definindo o tamanho da fonte como 24px ao invés de 16px.
Esse aumento de especificidade foi uma das razões pelas quais o estilo foi aplicado corretamente.
2. Por que a fonte não estava funcionando sem a classe?
Existem algumas possibilidades de por que a regra CSS de font-size não estava sendo aplicada quando você usou apenas o seletor de tag (como h2).
Se houver outras regras com maior especificidade, como uma classe ou ID, a regra do h2 pode ser sobrescrita.
Por exemplo:
h2 {
font-size: 16px;
}
.alguma-classe h2 {
font-size: 14px;
}
Nesse caso, o estilo font-size: 14px de .alguma-classe h2 prevaleceria.
Se o estilo estiver sendo definido inline no próprio HTML ou em uma folha de estilo com maior prioridade (como regras !important ou uma folha de estilo que carrega depois), isso pode sobrescrever o estilo do h2.
O CSS segue o princípio da "cascata", então, se houver algum estilo vindo de outro elemento (como de um elemento pai), ele pode estar afetando o comportamento da sua regra. Por exemplo, se você tiver:
body {
font-size: 12px;
}
h2 {
font-size: inherit;
}
O font-size de h2 vai herdar o valor de 12px do body, a menos que você sobrescreva isso explicitamente.
3. É uma boa prática usar seletores de classe?
Sim, usar seletores de classe é uma boa prática em muitos casos, especialmente para garantir que o estilo seja aplicado de forma mais controlada.
Isso ajuda a evitar conflitos e a torna o código mais modular e reutilizável. Aqui estão alguns motivos:
- Maior especificidade: Como você já viu, um seletor de classe tem maior especificidade do que um seletor de tag simples, o que torna mais fácil aplicar o estilo de maneira precisa sem ser sobrescrito.
- Reutilização: Você pode aplicar a mesma classe a diferentes elementos, o que facilita a reutilização dos estilos.
- Facilidade de manutenção: Se o estilo precisa ser alterado, você pode atualizar a classe de uma vez e todas as instâncias que usam essa classe serão atualizadas.
No entanto, não exagere na especificidade.
Usar seletores como h2.tópicos__título é uma boa prática, mas, quando você começa a usar muitas classes encadeadas com tags e identificadores, o CSS pode se tornar mais difícil de manter.
Evite, por exemplo, algo como:
div.container ul li a.tópicos__link {
font-size: 24px;
}
Isso torna o código mais difícil de entender e modificar no futuro.
Uma abordagem mais simples, como tópicos__link, pode ser suficiente e igualmente eficaz.
Se quiser uma analise mais detalhada me envie seu codigo html e css.
Qualquer duvida comente ai.
Bons estudos.
