As diferenças entre CSS nativo e aninhamento Sass

Desde que foi lançado, o CSS recusou-se obstinadamente a oferecer suporte a uma sintaxe para aninhar seletores. A alternativa sempre foi usar um pré-processador CSS como o Sass. Mas hoje, o aninhamento faz parte oficialmente do CSS nativo. Você pode experimentar esse recurso diretamente em navegadores modernos.

Se estiver migrando do Sass, você precisará levar em consideração quaisquer diferenças entre o aninhamento nativo e o aninhamento Sass. Existem algumas diferenças importantes entre os dois recursos de aninhamento, e estar ciente delas é crucial se você estiver fazendo a mudança.

Você precisa usar "&" com seletores de elementos em CSS nativo

CSS Nesting ainda é uma especificação preliminar, com suporte variado para navegadores. Certifique-se de verificar sites como caniuse. com para obter informações atualizadas.

Aqui está um exemplo do tipo de aninhamento que você veria no Sass, usando a sintaxe SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

Este bloco CSS especifica que qualquer lista não ordenada dentro de um elemento com um navegação classe se alinha como uma coluna flexível, uma maneira de colocando elementos HTML na página. Além disso, todo o texto do link âncora dentro dos elementos com um navegação a classe deveria ser negra.

Agora, em CSS nativo, esse tipo de aninhamento seria inválido. Para fazer funcionar, você teria que incluir o símbolo de e comercial (&) na frente dos elementos aninhados, assim:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

A versão inicial do aninhamento CSS não permitia o aninhamento de seletores de tipo. Uma mudança recente significa que você não precisa mais usar “&”, mas versões mais antigas do Chrome e Safari podem ainda não suportar esta sintaxe atualizada.

Agora, se você estivesse usando um seletor que começa com um símbolo (por exemplo, seletor de classe) para segmentar uma parte específica da página, você pode omitir o e comercial. Portanto, a seguinte sintaxe funcionaria tanto em CSS nativo quanto em Sass:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Você não pode criar um novo seletor usando “&” em CSS nativo

Um dos recursos que você provavelmente adora no Sass é a capacidade de fazer algo assim:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Este código Sass é compilado no seguinte CSS bruto:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

No CSS nativo, você não pode criar um novo seletor usando "&". O compilador Sass substitui o "&" pelo elemento pai (por exemplo .nav), mas o CSS nativo tratará o "&" e a parte seguinte como dois seletores separados. Como resultado, tentará fazer um seletor composto, que não dará o mesmo resultado.

Este exemplo funcionará em CSS nativo:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Isso funciona porque o primeiro seletor é o mesmo que nav.nav-list em CSS simples, e o segundo é o mesmo que nav.nav-link. Adicionar um espaço entre o "&" e o seletor seria equivalente a escrever nav .nav-list.

Em CSS nativo, se você usar o E comercial assim:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

É o mesmo que escrever isto:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Isso pode ser uma surpresa para você, considerando que tanto o __lista de navegação e __nav-link estão dentro do .nav seletor. Mas o E comercial na verdade coloca os elementos aninhados na frente do elemento pai.

A especificidade pode ser diferente

Outra coisa a notar é o impacto na especificidade que não acontece no Sass, mas acontece no aninhamento CSS nativo.

Então digamos que você tenha um e um elemento. Com o seguinte CSS, um em qualquer um desses elementos usará uma fonte serifada:

#main, article {
h2 {
font-family: serif;
 }
}

A versão compilada do código Sass acima é a seguinte:

#mainh2,
articleh2 {
font-family: serif;
}

Mas a mesma sintaxe de aninhamento em CSS nativo produzirá um resultado diferente, efetivamente igual a:

:is(#main, article) h2 {
font-family: serif;
}

O é() O seletor lida com regras de especificidade de maneira um pouco diferente do aninhamento Sass. Basicamente, a especificidade de:é() é atualizado automaticamente para o item mais específico na lista de argumentos fornecida.

A ordem dos elementos pode alterar o elemento selecionado

O aninhamento em CSS nativo pode mudar completamente o que o seletor realmente significa (ou seja, seleciona um elemento completamente diferente).

Considere o seguinte HTML, por exemplo:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

E o seguinte CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Este é o resultado se você usar Sass como compilador CSS:

Agora no bloco HTML, se você mover o com a turma de tema escuro dentro daquele de apelo à ação, isso quebraria o seletor (no modo Sass). Mas quando você muda para CSS normal (ou seja, sem pré-processador CSS), os estilos continuarão a funcionar.

Isso se deve à maneira como o :é() funciona sob o capô. Portanto, o CSS aninhado acima é compilado no seguinte CSS simples:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Isso está especificando um .cabeçalho que é descendente de ambos .tema escuro e .call to action. Mas a ordem deles realmente não importa. Contanto que o .cabeçalho é descendente de .call to action e .tema escuro, funciona em qualquer ordem.

Este é um caso extremo e não é algo que você encontrará com frequência. Mas entendendo o :é() a funcionalidade subjacente do seletor pode ajudá-lo a dominar como o aninhamento funciona em CSS. Isto também faz depurando seu CSS muito facil.

Aprenda como usar Sass no React

Como o Sass é compilado em CSS, você pode usá-lo com praticamente qualquer estrutura de UI. Você pode instalar o pré-processador CSS em projetos Vue, Preact, Svelte e, claro, React. O processo de configuração do Sass para todas essas estruturas também é bastante simples.

A maior vantagem de usar Sass no React é que ele permite escrever estilos limpos e reutilizáveis ​​usando variáveis ​​e mixins. Como desenvolvedor React, saber como usar Sass o ajudará a escrever um código mais limpo e eficiente e o tornará um desenvolvedor melhor em geral.