Oi Eric, tudo bem?
Em muitos casos, a criação de duas classes distintas para um mesmo elemento pode ter como objetivo a organização do código e a separação de responsabilidades. Por exemplo, uma classe pode ser responsável pelo posicionamento do elemento (como a classe .container
), enquanto a outra classe pode ser responsável pela personalização do elemento (como a classe .principal
).
Isso permite que você reutilize as classes para outros elementos que necessitem de estilos semelhantes, tornando seu código mais DRY (Don't Repeat Yourself - Não se Repita). Além disso, torna o código mais fácil de entender e manter, pois cada classe tem um propósito claro e definido.
No entanto, se a classe .principal
sozinha for suficiente para estilizar o elemento da maneira que você deseja, não há necessidade de adicionar a classe .container
.
Em relação aos critérios que você deve seguir para perceber a necessidade de criar classes distintas em códigos futuros, aqui vão algumas dicas:
Reutilização: Se você perceber que vários elementos compartilham estilos semelhantes, pode ser útil criar uma classe para esses estilos e aplicá-los a todos os elementos relevantes.
Separação de responsabilidades: Se um elemento requer estilos para várias coisas diferentes (por exemplo, posicionamento e personalização), pode ser útil criar classes separadas para cada conjunto de estilos.
Legibilidade: Se o seu CSS está ficando muito complicado e difícil de entender, pode ser útil dividir os estilos em classes separadas para torná-lo mais legível.
É importante lembrar que a decisão final sobre quantas e quais classes criar depende de você e do que faz sentido para o seu projeto.
Espero ter ajudado.
Um abraço e bons estudos.