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”.
MUO VÍDEO DO DIA
ROLE PARA CONTINUAR COM O CONTEÚDO
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.
últimas postagens
Estilo aninhado: à moda antiga
O estilo aninhado é um recurso disponível em muitos pré-processadores CSS, como Sass, Stylus e Less CSS. Embora a sintaxe possa diferir entre esses pré-processadores, o conceito subjacente permanece consistente. Se você quiser estilizar todos os elementos h1 em um div com o nome da classe container, em CSS regular, você escreveria:
.container {
background-color: #f2f2f2;
}.container h1 {
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="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 contêiner de nome de classe tem uma cor de fundo vermelha. O estilo do elemento h1 está no bloco .container. Este elemento h1 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 contêiner 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 elemento h1 deve permitir que o navegador saiba que você está direcionando todos os elementos h1 filhos no contêiner div. Ao executar o código no navegador, você verá o seguinte:
Uma vez que & é 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:"Here is a pseudo element.";
}
}
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 elemento p 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;
}
}
Esse bloco de código faz basicamente a mesma coisa que o anterior, mas tem 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 em prática tudo o que você aprendeu até agora, criando um site simples e aproveitando o recurso de estilo aninhado em CSS. Crie uma pasta e nomeie como quiser. Nessa pasta, crie um arquivo index.htm e um arquivo style.css.
No arquivo index.htm, adicione o seguinte código clichê:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/how-to-use-native-css-nesting-in-your-web-applications/style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</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>
<div class="sidebar">
<h2>Trending Articles</h2>
<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. Em seguida, abra o arquivo style.css 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: "Written by ";
}
&: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 seletor .container 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.