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

DUVIDA SOBRE A CLASSE PRINCIPAL

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Posicionando elementos e atividade Alinhamentos

por JULIANO PEREIRA DA ROSA
| 103.5k xp | 190 posts

Boa noite amigos, estou com uma dúvida, quando declarei a classe na section


    <section class="container principal">
        <div class="container__caixa">
            <h1 class="container__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço
                único.</h1>
            <img src="img/Combo.png" alt="combo" class="container__imagem">
            <a href="www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>
            <a href="www.alura.com.br" class="container__botao botao_secundario">Assinar somente o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
    </section>

entendi que posso declarar mais de uma classe em uma única tag correto? Isso significa que em uma ordem, minha section está dentro da principal e a principal dentro da container?

outra duvida é: Por que no CSS tive que declarar ambas as classes separadas?

.principal {
      background-image: url("/img/Background.png");
      background-repeat: no-repeat;
      background-position: right;
      align-items: center;
      text-align: center;
  }

  .container {
      height: 100vh;
      display: grid;
      grid-template-columns: 50% 50%;
      font-family: var(--fonte-principal);
  }

Não seria melhor utilizar uma só? Muito obrigado desde já.

3 respostas
por Mateus de Sousa Maciel
| 148k xp | 24 posts

1 - Isso significa que em uma ordem, minha section está dentro da principal e a principal dentro da container?

Isso significa que sua section contém duas classes com o mesmo poder de hierarquia, ou seja, quanto principal e container estão no mesmo grau, desta forma, elas são classes pais em conjunto.

Elas deveriam ser assim, se fosse por essa lógica:

<section class="principal">
        <div class="container">
            CONTEUDO!
        </div>
</section>

2 - outra duvida é: Por que no CSS tive que declarar ambas as classes separadas?

A classe principal será usada apenas nessa section, logo a classe container poderá ser reutilizada em outra section.

3 - Não seria melhor utilizar uma só? Muito obrigado desde já.

Realmente, poderia sim.

Mas pensando em reutilizar linhas de código, e retornar seu código reutilizável para outros momentos, é recomendável que utilize desta forma, para reaproveitar quando surgir uma oportunidade no futuro.

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

Caso contrário, teria que criar container-principal e container-secundario, imagine 12 sections (impossível, mas imagine).

por JULIANO PEREIRA DA ROSA
| 103.5k xp | 190 posts

Primeiro, muito obrigado pela excelente explicação, objetiva e concisa. Uma curiosidade: o limite de classes declaradas são somente duas ou pode se haver mais? Desde já agradeço.

solução!
por Mateus de Sousa Maciel
| 148k xp | 24 posts

Perfeito, não existe limites na inserção de classes em class="", ou seja, pode inserir a quantidade que for necessária para seu código.

<div class="primeiro segundo terceiro quarto">
    <h2>Olá, Mundo</h2>
</div>