Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Uma dúvida sobre a classes com nomes duplos usando underlines e não usando underline

Referente ao curso Layouts Responsivos: trabalhando com layouts mobile, no capítulo Particularidades de telas e atividade Unidades de medida viewport

por Marcos Vitor
| 86k xp | 254 posts
Estudante de programação

Eu já perguntei algo parecido aqui no fórum em um outro curso onde esse conceito não tinha ficado claro e mesmo assim me veio novamente uma outra dúvida no assunto. Bom, notei que no código HTML abaixo tem um exemplo das classes que eu disse:

<section class="chamada container">
                        <h1 class="chamada__titulo">Aplicativos Na Medida</h1>
                        <p class="chamada__texto">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
                        <a href="#" class="chamada__botao botao">Conheça os planos</a>
                    </section>

O problema que o curioso é que no arquivo "chamada.css" tem esses códigos abaixo onde eu não entendi uma coisa: A classe chamada__botao botao. Pois é aí que está a dúvida. Por que o CSS só consegue capturar a classe do último nome botao ? Por que não usa apenas a `chamada__botao?

.chamada  {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--branco);
    text-align: center;

    background-color: var(--bg-chamada-mobile);

    padding-top: 12.25rem;
    padding-bottom: 2.5rem;
}

.chamada__titulo {
    font-family: var(--montserrat);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;

    margin-bottom: 1.5rem;
}

.chamada__texto {
    font-size: 1.25rem;
    line-height: normal;

    margin: 0 auto 2.5rem;
}

.chamada__botao {
    width: 100%;

E mais uma dúvida, logo acima no início do código tem a classe `chamada container sem o underline. Daí eu não entendi por que tem 2 classes? E por que só usa a classe chamada? E não usa a classe container? Para que serve o nome "container" ali? Confesso que fiquei um pouco confuso. Alguém pode me dizer o porquê disso?

6 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Marcos, tudo bem?

Poderia mandar o código completo? Acho que vocẽ mandou o código cortado sem querer. Pois não achei o seletor chamada__botao botao

por Marcos Vitor
| 86k xp | 254 posts
Estudante de programação

Eu me referi ao primeiro código HTML logo no início. Esse código abaixo apontado pela flexa a classe que me referi. Mesmo assim vou deixar o código HTML completo logo abaixo da imagem, juntamente com o código CSS. E o que eu não entendi aqui foi a questão de usar apenas o primeiro nome chamada__botao da mesma classe chamada__botao botao como captura de classe no CSS. Porque que usa apenas o primeiro nome chamada__botao que está com o underline lá no arquivo chamada.css? 

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Home | Apeperia</title>
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
            <link href="css/reset.css" rel="stylesheet">
            <link href="css/base.css" rel="stylesheet">
            <link href="css/cabecalho.css" rel="stylesheet">
            <link href="css/chamada.css" rel="stylesheet">
            <link href="css/destaques.css" rel="stylesheet">
            <body>
                    <header class="cabecalho container" >
                    <img src="img/logo-apeperia.svg" alt="Logo da Apeperia" class="cabecalho__logo">
                    <nav class="cabecalho__navegacao">
                        <ul>
                            <li class="cabecalho__link"><a href="#">Sobre</a></li>
                            <li class="cabecalho__link"><a href="#">Planos</a></li>
                            <li class="cabecalho__link"><a href="#">Blog</a></li>
                            <li class="cabecalho__link"><a href="#">Destaques</a></li>
                            <li class="cabecalho__link"><a href="#">Institucional</a></li>
                            <li class="cabecalho__link"><a href="#">Contato</a></li>
                        </ul>
                    </nav>
                </header>
                <main>
                    <section class="chamada container">
                        <h1 class="chamada__titulo">Aplicativos Na Medida</h1>
                        <p class="chamada__texto">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
                        <a href="#" class="chamada__botao botao">Conheça os planos</a>
                    </section>
                    <section class="destaques container">
                        <h2 class="destaques__titulo">Destaques</h2>
                        <a href="#">
                            <figure class="destaques__painel">
                                <img src="img/comecando-criar-logotipo.png" alt="Painel do post sobre criação de logotipo" class="destaques__painel-imagem">
                                <figcaption class="destaques__painel-texto">Conheça as primeiras etapas para a criação de um logotipo</figcaption>
                            </figure>
                        </a>
                        <a href="#">
                            <figure class="destaques__painel">
                                <img src="img/dicas-fotografia.png" alt="" class="destaques__painel-imagem">
                                <figcaption class="destaques__painel-texto">Veja dicas de como fotografar usando seu celular</figcaption>
                            </figure>
                        </a>
                        <a href="#" class="destaques__botao botao">Receber destaques por email</a>
                    </section>
                    <section class="diferenciais container">
                        <ul class="diferenciais__lista">
                            <li class="diferenciais__item">
                                <h2 class="item__titulo"></h2>
                                <p class="item__texto">
                                    <li class="diferenciais__item">
                                        <h2 class="item__titulo"></h2>
                                        <p class="item__texto"></p>
                                    </li>
                                    <li class="diferenciais__item">
                                        <h2 class="item__titulo"></h2>
                                        <p class="item__texto"></p>
                                    </li>
                                </p>
                            </li>
                        </ul>
                    </section>
                </main>
            </body>
        </head>
    </html>
por Marcos Vitor
| 86k xp | 254 posts
Estudante de programação

E aqui está o CSS referente ao HTML da pergunta acima:

.chamada  {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--branco);
    text-align: center;

    background-color: var(--bg-chamada-mobile);

    padding-top: 12.25rem;
    padding-bottom: 2.5rem;
}

.chamada__titulo {
    font-family: var(--montserrat);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;

    margin-bottom: 1.5rem;
}

.chamada__texto {
    font-size: 1.25rem;
    line-height: normal;

    margin: 0 auto 2.5rem;
}

.chamada__botao {
    width: 100%;
}
por Marcos Vitor
| 86k xp | 254 posts
Estudante de programação

E aqui está o outro CSS relacionado ao que me referi logo acima, que usa o segundo nome botão da mesma classe dupla chamada__botao botao como captura lá no arquivo "base.css"

:root {
    --branco: #FFF;
    --azul-claro: #DFE3E5;
    --vermelho-forte: #B72E2E;
    --cinza-escuro: #4F4C4C;
    --cinza-claro: #F7F4F4;
    --cinza-medio: #D9D9D9;

    --fonte-link: #0084FF;
    --fonte-cinza: #666;
    --borda-cabecalho-mobile: #103D4A;
    --bg-rodape: #333;
    --bg-chamada-mobile: #00161C;

    --planos-cartao-start: #56CCF2;
    --planos-cartao-ultra: #B04CD9;
    --planos-cartao-mega: #E33B3B;

    --montserrat: 'Montserrat', sans-serif;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.content {
    padding-right: 6%;
    padding-left: 6%;
}

.botao {
    text-align: center;

    display: block;

    width: 100%;
    max-width: 350px;

    box-sizing: border-box;

    padding: 1rem 2rem;

    border: 1px solid var(--branco);
    border-radius: 5px;
}
solução!
por Luiz Henrique
| 150.3k xp | 17 posts
Desenvolvedor SQL

Opa tudo bem Marcos?

Pelo que entendi a sua duvida foi nesse "chamada__botao botao" e também no "chamada container certo?

O "chamada__botao" é a classe que o professor usou para criar as cores do botão expecifico do bloco Detalhes, enquanto a classe "botao" o professor criou no base.css para definir o tamanho da borda, display, texto alinhado no centro e etc em todos os botoes.

E explicando sobre o Underline e não Underline, neste caso tem "chamada__botao botao" pq para criar/chamar mais de uma classe basta dar um espaço, sem usar virgulas ou pontos, com isso o HTML e CSS entendem que chamada__botao é uma classe e que "botao" é outra. Acontece o mesmo com "chamada" e "container"

Espero que tenha ajudado e não confundido mais :D

por Marcos Vitor
| 86k xp | 254 posts
Estudante de programação

Opa! Ajudou muito Luiz Henrique. Valeu por explicar!