Recentemente, enquanto trabalhava em um projeto com React JS, utilizando SCSS para estilizar componentes da interface, passei por uma experiência que me pegou de surpresa. Estava no fluxo, criando vários componentes, escopando estilos e, sem perceber, comecei a escrever CSS nativo. O que me deixou boquiaberto foi o momento em que utilizei uma estrutura de aninhamento típica do SCSS e… o navegador aceitou numa boa! Foi aí que me dei conta: o CSS nativo, em sua versão mais recente, agora suporta o tão amado nesting.

Agora, você pode escrever o seguinte código diretamente no CSS:

.c-card {
    width: fit-content;
    padding: 2px 16px;
    background-color: #eee;
    margin-bottom: 20px;

    .c-card-contents {
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
    }
}

E não para por aí. O aninhamento facilita muito na hora de criar variações de estilos, como, por exemplo, customizar as cores de um diálogo de alerta. Usando CSS nativo, você pode otimizar seu código, aninhando elementos e classes para estilizar componentes de maneira mais eficiente. Veja este exemplo:

<div class="c-card c-card--default">
    <p class="c-card-contents">Aqui vem um teste</p>
</div>

<div class="c-card c-card--warning">
    <p class="c-card-contents">Aqui vem um teste</p>
</div>

<div class="c-card c-card--info">
    <p class="c-card-contents">Aqui vem um teste</p>
</div>

Com o CSS aninhado, podemos aplicar diferentes estilos de fundo para cada variação:

.c-card {
    width: fit-content;
    padding: 2px 16px;
    background-color: #eee;
    margin-bottom: 20px;

    &[class*="--default"] {
        background-color: #eee;
    }

    &[class*="--warning"] {
        background-color: #dde286;
    }

    &[class*="--info"] {
        background-color: #86d4e2;
    }

    .c-card-contents {
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
    }
}

Como você pode ver, estou utilizando o seletor de atributos dentro do aninhamento para aplicar estilos específicos às classes. O truque está no uso de &[class*=""]. O operador *= verifica se a classe contém a string especificada, como --warning, e aplica o estilo correspondente, como o background que definimos. Isso permite criar variações de estilo de maneira eficiente e organizada, simplificando o CSS.

Para que você possa compreender de forma fácil o que eu fiz, apenas criei variações de um dialogo, indicando cores diferentes para cada situação, veja abaixo:

Fiquei genuinamente surpreso ao ver que o CSS nativo já é capaz de fazer isso, e muito animado, porque agora posso utilizar essa técnica de maneira nativa, sem precisar me preocupar com a instalação e configuração do SCSS. E o melhor de tudo, praticamente todos os navegadores já oferecem suporte a esse recurso.

Para quem, como eu, adora explorar novas funcionalidades, a comunidade CSS já está discutindo a possibilidade de trazer mixins e includes para o CSS nativo. Será que vem mais novidades por aí? Mal posso esperar para descobrir.

Caso queira saber mais, abordei de forma um pouco mais profunda no Portal Gluby. Confere lá.

Por hoje é isso. Assim que descobrir mais coisas, compartilho por aqui.

Até a próxima!