Historicamente, o CSS apresentava desafios em seu manuseio. Os pré-processadores de CSS surgiram como ferramentas que simplificaram o trabalho com a linguagem, além de introduzir funcionalidades como loops, mixins e outras. Com o passar do tempo, o CSS evoluiu, ganhando mais recursos e adotando algumas das funcionalidades inicialmente encontradas nos pré-processadores, como o “estilo aninhado”.
MOMENTO DE VÍDEO MUO
CONTINUE A LEITURA
O estilo aninhado possibilita que desenvolvedores agrupem regras CSS dentro de outras, refletindo a estrutura do HTML. Isso resulta em um código mais organizado e de fácil leitura, onde a relação entre os elementos HTML e seus respectivos estilos se torna visualmente clara.
Estilo Aninhado: A Maneira Antiga
O estilo aninhado é um recurso presente em diversos pré-processadores CSS, como Sass, Stylus e Less CSS. Embora a sintaxe possa variar entre esses pré-processadores, o conceito fundamental se mantém consistente. Para estilizar todos os elementos h1 dentro de um div com a classe “container” usando CSS comum, você escreveria:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
Em um pré-processador CSS como Less, o estilo aninhado seria implementado da seguinte forma:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
O bloco de código acima alcança os mesmos resultados da implementação CSS regular, porém facilita a compreensão do código para qualquer desenvolvedor que o leia. Esse senso de hierarquia foi um dos maiores atrativos dos pré-processadores de CSS.
A estrutura de aninhamento pode ser aprofundada sem limites, mas é crucial ter cautela, pois um aninhamento excessivamente profundo pode tornar o código confuso e difícil de manter.
Estilo Aninhado Nativo em CSS
Nem todos os navegadores suportam o estilo aninhado nativo. O site Can I Use… pode auxiliá-lo a verificar se o navegador que você tem como alvo oferece suporte a esse recurso.
O estilo aninhado nativo em CSS opera de maneira semelhante aos pré-processadores, permitindo o aninhamento de seletores dentro de outros. Contudo, existe uma diferença fundamental que merece atenção. Observe o trecho 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>Olá do planeta Terra!</h1>
</div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
</style>
</body>
</html>
Neste código, o div com a classe “container” tem uma cor de fundo vermelha. O estilo do elemento h1 está dentro do bloco .container, definindo sua cor como amarela. Ao executar esse código em um navegador, você notará que o h1 não é estilizado como esperado. O navegador aplica corretamente o fundo vermelho ao contêiner div, mas a cor amarela do h1 não é aplicada.
Isso ocorre porque o estilo aninhado em CSS funciona de forma ligeiramente distinta dos pré-processadores como Less. Você não pode referenciar diretamente um elemento HTML dentro de uma árvore aninhada. Para corrigir isso, você precisa usar o símbolo “&”, conforme demonstrado abaixo:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
No código acima, “&” serve como referência ao seletor pai. Ao colocar o símbolo antes do elemento h1, você informa ao navegador que está direcionando todos os elementos h1 filhos do contêiner div. Ao executar o código em um navegador, você observará que o h1 é estilizado corretamente.
Já que “&” é usado para referenciar o elemento pai, é possível direcionar pseudoclasses e pseudoelementos de um elemento da seguinte forma:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Aqui está um pseudo elemento.";
}
}
Antes da implementação do estilo aninhado em CSS, se você desejasse aplicar estilos condicionalmente, de acordo com a largura do navegador, você teria que usar uma abordagem como esta:
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 exceder 750px, ele usará a cor cinza; caso contrário, aplicará a cor padrão (preto).
Essa implementação funciona, mas pode se tornar verbosa e complexa rapidamente, especialmente quando você precisa aplicar estilos diferentes com base em várias regras. Agora, é possível aninhar consultas de mídia diretamente dentro do 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 possui a vantagem de ser mais fácil de entender. Ao observar a consulta de mídia e o elemento pai aninhado, fica claro como o navegador aplicará os estilos apropriados quando as condições definidas forem atendidas.
Estilizando um Site com Estilos Aninhados CSS
Chegou a hora de aplicar tudo o que você aprendeu até agora, criando um site simples e usando o recurso de estilo aninhado do CSS. Crie uma pasta e nomeie-a como desejar. Dentro dessa pasta, crie um arquivo index.htm e um arquivo style.css.
No arquivo index.htm, insira o seguinte código básico:
<!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="style.css" />
<title>Site Simples</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">há 3 horas</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>Artigos em Alta</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
O 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: "Escrito por ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
O código acima estiliza o site inteiro com estilo aninhado CSS. O seletor .container age como a raiz. Você pode referenciar esse seletor usando o símbolo “&”. Ao executar o código no navegador, você visualizará um layout estilizado de forma aninhada.
Você ainda Precisa de um Pré-processador CSS?
Com a introdução do estilo aninhado no CSS nativo, os pré-processadores podem parecer desnecessários. No entanto, é crucial ter em mente que eles oferecem muito mais do que apenas aninhamento. Eles fornecem recursos como loops, mixins, funções e outras funcionalidades. Em última análise, usar ou não um pré-processador CSS depende do seu caso de uso específico e preferências pessoais.