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

Boas praticas de seletores

Boa noite a todos!! Uma dúvida, estive fazendo alguns padrões no css usando muito seletores "nested" dentro de uma classe principal (ex: .classe-principal ul > li > a), porém parei para pensar se isso é uma boa pratica ao inves de colocar em classe em todos os elementos, alguma indicação? Abraço!!!

3 respostas

Oi, George, tudo bem?

Você pdoeria deixar aqui um trecho de como está declarado teu css para entender e visualizar melhor como você declarou os seletores? Aguardo :}

Oi Laís, tudo joia? Ó ... meu css está assim (mais ou menos) ... minha duvida é se isso está certo (uma vez q os seletores sempre "procuram" a classe main) ou se seria melhor adicionar uma classe para cada elemento html. Tks :)

.main ul{
    display: flex;
    flex-direction: columns;
}

.main ul > li{
    position: relative;
}

.main ul > li > a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="main">
    <ul>
        <li>
            <a href="#">
                <span>Item 01</span>
            </a>
        </li>
    </ul>
</div>
solução!

Oi, George, tudo bem?

O interessante é criar classes a partir do seu layout. Nesse caso aí, acredito que esteja faltando a tag nav para "envelopar" as lista de links. Crinando a tag <nav /> criariamos uma classe para ela:


<nav class="nav-bar">
    <ul>
        <li>
            <a href="#">
                <span>Item 01</span>
            </a>
        </li>
    </ul>
</nav>

Veja que semanticamente a tag nav e nomeia a classe nav-bar é muito mais interessante e, na verdade, a forma mais correta. Assim, serve para definirmos um header, footer, etc. No momento de estilizar, fica mais coerente também:

.nav-bar li {
    display: flex;
    justify-content: flex-end;
}

Você sabe do que esse estilo está tratando de uma classe relacionada à tag main. Se usar somente div ou nomes genériocos demais para definiri classes, numa aplicação grande, pode te gerar muita dor de cabeça.

Pegou a ideia? Qualquer dúvida é só falar :}