Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

2 classes? <section class="container principal">

Olá Pessoal,

Não entendi muito bem a utilização de duas classes na mesma tag e posteriormente atribuindo operações diferentes no CSS:

.principal{
    background-image: url("assets/Background.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: blue;
}

.container{
    height: 100vh;
    background-color: red;
}

Utilizei cores diferentes mas a vermelha se sobrepôs, qual a regra disso?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas

Olá Daniel, tudo bem?

A utilização de duas classes na mesma tag é uma prática comum em CSS. Isso acontece porque cada classe pode conter um conjunto diferente de propriedades, permitindo que você crie estilos mais complexos e específicos para seus elementos HTML.

No seu exemplo, a classe "principal" define a imagem de fundo e outras propriedades de estilo relacionadas ao fundo, enquanto a classe "container" define a altura da seção e outras propriedades de estilo relacionadas ao layout.

Quando duas classes são aplicadas a um mesmo elemento, o navegador aplica as propriedades de estilo de ambas as classes, mas a ordem em que as classes são definidas pode afetar o resultado final. No seu caso, a classe "container" é definida depois da classe "principal", o que significa que as propriedades da classe "container" sobrescrevem as propriedades da classe "principal" para a cor de fundo.

Para evitar que isso aconteça, você pode definir a cor de fundo diretamente na classe "principal" ou usar o seletor de classe mais específico para a cor de fundo, como .container.principal.

Espero ter ajudado e bons estudos!

Beleza, mas se o resultado é o mesmo porquê utilizar as duas classes?, se aplicar o height: 100vh; na classe principal, terá o mesmo resultado. Eu não entendi a usabilidade das duas classes, é algo mais pra semântica?

solução!

Olá, Daniel! É uma questão de organização do código. Até essa parte inicial do projeto pode ter parecido desnecessário criar duas classes realmente, porém conferindo o repositório do projeto final deu para entender melhor o contexto.

A classe container esta definindo a largura de alguns componentes, aplicando uma padronização entre eles, quando trabalhamos com classes nomeadas de container, já associamos automaticamente à definição de largura e altura de algum componente(igual um container ou uma caixa na vida real), e nas outras classes são aplicados estilos de cores, fontes e espaçamentos internos. Isso deixa o código mais legível e organizado, facilitando a manutenção. Essa é apenas uma abordagem de organização de código html e css, e legal que você teve essa sacada, nada impede que o código seja construído de outra forma, chegando no mesmo efeito visual.

Se você desejar, pode tentar construir o mesmo layout com outras abordagens e compartilhar aqui no fórum para outros estudantes!

Espero ter ajudado. Bons estudos!

Ah sim, agora saquei... Realmente facilita a organização na hora de estilizar, tendo uma classe como "padrão" a container e outra(s) para aplicar o restante do estilo.

Muito obrigado Luan!!

De nada, Daniel! :)

Surgindo mais dúvidas, pode contar com a gente!

Bons estudos!