O aninhamento de CSS nativo pode simplificar seu código CSS e aprimorar sua experiência geral de codificação.

Historicamente, CSS tem sido uma linguagem difícil de se trabalhar. Os pré-processadores CSS facilitaram o trabalho com CSS e também forneceram recursos adicionais, como loops, mixins e muito mais. Com o passar dos anos, o CSS se tornou mais capaz e adotou alguns dos recursos originalmente introduzidos pelos pré-processadores CSS. Um desses recursos é o "estilo aninhado".

O estilo aninhado permite que os desenvolvedores aninham regras CSS umas nas outras, refletindo a estrutura HTML. Isso resulta em um código mais organizado e legível, pois a relação entre os elementos HTML e seus estilos correspondentes é visualmente aparente.

Estilo aninhado: à moda antiga

O estilo aninhado é um recurso disponível em muitos Pré-processadores CSS como Sass, Stylus e menos CSS. Embora a sintaxe possa diferir entre esses pré-processadores, o conceito subjacente permanece consistente. Se você queria estilizar todos os

instagram viewer
h1 elementos em um div com o nome da classe recipiente, em CSS regular, você escreveria:

.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}

Em um pré-processador CSS como Less CSS, você implementa um estilo aninhado como este:

.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
 }
}

O bloco de código acima alcança os mesmos resultados que a implementação regular de CSS, mas facilita para qualquer desenvolvedor que leia o código entender o que está acontecendo. Esse senso de "hierarquia" foi um dos maiores pontos de venda dos pré-processadores CSS.

A árvore de aninhamento pode ser aninhada em qualquer profundidade sem limitações, mas é essencial ter cuidado, pois um aninhamento excessivamente profundo pode levar a verbosidade do código.

Estilo aninhado nativo em CSS

Nem todos os navegadores incluem suporte para estilo aninhado nativo. O Eu posso usar... site pode ajudá-lo a verificar se o navegador de destino oferece suporte a esse recurso.

O estilo aninhado nativo em CSS funciona de maneira semelhante aos pré-processadores CSS, o que significa que é possível aninhar qualquer seletor dentro de outro. Mas há uma diferença fundamental que você deve observar. Observe o bloco de código abaixo:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
 .container {
 background-color: red;
 h1 {
 color: yellow;
 }
 }
style>
body>
html>

No bloco de código acima, o div com o nome da classe recipiente tem uma cor de fundo vermelha. O estilo para o h1 elemento encontra-se no .recipiente bloquear. Esse h1 elemento tem a cor amarela. Ao executar esse código no navegador, você pode notar algo errado. O navegador aplica corretamente uma cor de fundo vermelha ao recipiente div, mas o h1 não tem o estilo apropriado.

Isso ocorre porque o estilo aninhado funciona de maneira um pouco diferente em CSS em comparação com pré-processadores CSS como Less. Você não pode referenciar diretamente um elemento HTML em uma árvore aninhada. Para corrigir isso, você precisa usar um e comercial (&) conforme ilustrado abaixo:

.container {
background-color: red;
 & h1 {
color: yellow;
 }
}

No bloco de código acima, & atua como uma referência ao seletor pai. Colocar o e comercial antes do h1 elemento deve permitir que o navegador saiba que você está segmentando todos os filhos h1 elementos no recipiente div. Ao executar o código no navegador, você verá o seguinte:

Desde & é o símbolo usado para referenciar um elemento pai, é bem possível direcionar as pseudoclasses e pseudoelementos de um elemento como este:

.parent1{
 &:hover{
background-color: red;
 }
 &::before{
content:"Hereisapseudoelement.";
 }
}

Antes da implementação do estilo aninhado CSS, se você pretendesse aplicar estilos condicionalmente, dependendo da largura do navegador, teria que recorrer a um método como o seguinte:

p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
 }
}

Quando o navegador renderiza a página, ele determina a cor do p elemento com base na largura do navegador. Se a largura do navegador exceder 750px, ele usará a cor cinza; caso contrário, aplica a cor padrão (preto).

Essa implementação funciona bem, mas como você pode imaginar, as coisas podem se tornar bastante detalhadas rapidamente, especialmente quando você precisa aplicar estilos diferentes com base em certas regras. Agora é possível aninhar consultas de mídia diretamente no bloco de estilo de um elemento.

p {
color:black;
@media (min-width:750px) {
color:gray;
 }
}

Este bloco de código faz basicamente a mesma coisa que o anterior, mas vem com a vantagem de ser fácil de entender. Simplesmente observando a consulta de mídia e o elemento pai aninhado, você pode saber como o navegador aplicará os estilos apropriados quando as condições definidas forem atendidas.

Estilizando um site com estilos aninhados CSS

É hora de colocar tudo o que você aprendeu até agora em prática, construindo um site simples e aproveitando o recurso de estilo aninhado em CSS. Crie uma pasta e nomeie como quiser. Nessa pasta, crie um index.htm e um estilo.css arquivo.

No index.htm arquivo, adicione o seguinte código clichê:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
div>
<div>
 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
 quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
 asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
 minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
 Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
 iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
 qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
 quae laudantium.
div>
div>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>

O bloco de código acima define a marcação para um site de notícias fictício. A seguir, abra o estilo.css arquivo e adicione o seguinte código:

.container {
display: flex;
gap: 25px;
@media(max-width: 750px) {
flex-direction: column;
 }


.article{
width:90%;
 }


 & div:nth-child(3) {
text-align: justify;
 }


 & span {
color: rgb(67, 66, 66);


 &:nth-child(1)::before {
font-style: italic;
content: "Writtenby ";
 }


 &:nth-child(2) {
font-style: italic;
 &::before {
content: " ~ ";
 }
 }
 }


.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
 }
}

O bloco de código acima estiliza o site inteiramente com estilo aninhado de CSS. O .recipiente seletor atua como a profundidade da raiz. Você pode fazer referência a este seletor usando o & símbolo. Ao executar o código no navegador, você verá o seguinte:

Você ainda precisa de um pré-processador CSS?

Com a introdução de estilos aninhados ao CSS nativo, os pré-processadores de CSS podem parecer desnecessários. No entanto, é crucial ter em mente que os pré-processadores CSS oferecem mais do que apenas estilo aninhado. Eles fornecem recursos como loops, mixins, funções e muito mais. Em última análise, usar um pré-processador CSS ou não depende do seu caso de uso específico e preferências pessoais.