1
resposta

Uso de duas classe ao mesmo tempo

Olá! tenho uma dúvida, trata-se do seguinte:
Podemos ver no projeto da professora Monica que ela faz uso de duas classes ao mesmo tempo, como no exemplo abaixo:
HTML:
...
<section class="container secundario"> <img src="img/Notebook.png" alt="Notebook com a página do curso HTML5 e CSS3 da Alura aberta" class="secundario__imagem"> <div class="container__descricao"> <h2 class="descricao__titulo">Baixe seus cursos</h2> <p class="descricao__texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.</p> </div> </section>
...
CSS:
...
.container { height: 100vh; display: grid; grid-template-columns: 50% 50%; }
...
...
.secundario { align-items: center; margin: 0 10em; }
...

Então é aí que está o ponto, qual seria de fato, apenas para esclarecimento, o motivo dessa prática? Seria reduzir o conteúdo codado, simplificação para melhor entendimento, ou um estilo de codar, pergunto, pois sinto que falta uma explicação mais detalhada para enchegar e eficácia de tal técnica, agradeço a quem puder me ajudar, fique com Deus!

1 resposta

Oi, Rafael! Como vai?

Quando você usa duas classes ao mesmo tempo, como:

<section class="container secundario">...</section>

o elemento passa a receber os estilos das duas classes juntos.

No seu caso:

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
}

.secundario {
    align-items: center;
    margin: 0 10em;
}
  • .container define a estrutura base (grid, altura, colunas).
  • .secundario adiciona ajustes específicos (alinhamento e margens).

O motivo dessa prática é simples: organizar e reaproveitar código.
Você cria uma classe para a base e outra para comportamentos específicos, evitando repetição e facilitando a manutenção.

Veja este exemplo:

<section class="box destaque">...</section>

<style>
.box { padding: 16px; border-radius: 8px; }
.destaque { border: 2px solid #06B9A1; }
</style>

A <section> recebe os dois estilos: formato base + destaque visual.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado