Como usar o aninhamento de CSS nativo em seus aplicativos da Web
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 aninhamento de regras CSS facilita uma representação visual da correlação entre elementos HTML e seus respectivos estilos, permitindo que os desenvolvedores incorporem regras CSS entre si. O resultado é uma estrutura organizacional aprimorada e legibilidade para o código, com uma representação clara de como os estilos são aplicados hierarquicamente com base na hierarquia HTML.
Estilo aninhado: à moda antiga
O estilo aninhado é uma funcionalidade que pode ser encontrada em vários pré-processadores CSS, como Sass, Stylus e Less CSS. Embora sua sintaxe possa variar, eles compartilham uma base comum. Por exemplo, se alguém deseja aplicar estilos a todos os elementos dentro de um elemento com o nome de classe “container”, o código CSS padrão ficaria assim:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
16 px; } em seu código de pré-processador. Isso permite um estilo organizado e eficiente que é facilmente adaptável a diferentes elementos em uma página da web.
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
O trecho de código acima mencionado exibe resultados semelhantes aos do CSS convencional, ao mesmo tempo em que promove compreensão e clareza entre os desenvolvedores que examinam o código-fonte. Essa noção de ‘estrutura hierárquica’ foi considerada uma vantagem significativa associada aos pré-processadores CSS.
Embora não haja restrições quanto à profundidade do aninhamento em uma estrutura de árvore, é importante ter cuidado ao criar elementos profundamente aninhados devido a possíveis aumentos na complexidade e detalhamento do código que podem resultar de tais práticas.
Estilo aninhado nativo em CSS
Nem todos os navegadores incluem suporte para estilo aninhado nativo. O site Can I use… pode ajudá-lo a verificar se o seu navegador de destino oferece suporte a esse recurso.
Os estilos aninhados no CSS nativo funcionam de forma comparável aos encontrados nos pré-processadores CSS, permitindo o encapsulamento de qualquer seletor dentro de outro. No entanto, é crucial reconhecer uma distinção essencial entre as duas abordagens. Considere o seguinte exemplo:
<!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 trecho de código fornecido, o elemento div com o atributo de classe"container"possui um tom de fundo carmesim. As características de design do componente de título são englobadas dentro dos limites da entidade div acima mencionada. Especificamente, o componente do título exibe uma pigmentação em tons de limão. Porém, quando executado por meio de um navegador de internet, pode-se perceber que há uma inconsistência na representação visual dos elementos. Apesar do navegador fornecer com precisão um pano de fundo vermelho ao div mencionado acima, parece que o cabeçalho carece dos embelezamentos visuais necessários.
Em CSS, o aninhamento de estilos funciona de maneira diferente dos pré-processadores CSS, como Less. Não é possível fazer referência direta a um elemento HTML dentro de uma hierarquia aninhada. No entanto, pode-se utilizar um símbolo de e comercial (&) para resolver esse problema, conforme demonstrado no exemplo fornecido.
.container {
background-color: red;
& h1 {
color: yellow;
}
}
A incorporação do símbolo de e comercial ("&") antes da designação"h1"serve como uma indicação do seletor pai, especificando assim o direcionamento de todos os elementos"h1"descendentes que residem no componente"div"abrangente. A execução desse código em um navegador da Web resultará na exibição de vários cabeçalhos “h1” organizados verticalmente em sucessão, cada um seguido por seu parágrafo de texto correspondente.
Considerando que o e comercial & serve como uma notação para identificar um elemento pai, torna-se viável abordar seletivamente as pseudoclasses e os pseudoelementos dos elementos da maneira descrita abaixo:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Aninhamento de consultas de mídia
Antes do advento do aninhamento de CSS, para implementar estilos condicionais com base na largura do navegador, era necessário utilizar uma técnica como a mencionada acima:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Quando o navegador da Web processa a página e calcula suas dimensões, ele estabelece o matiz do elemento do parágrafo de acordo com o tamanho da janela do navegador. Nos casos em que a largura do navegador ultrapassa 750 pixels, um tom de cinza é utilizado como cor de fundo da tag; por outro lado, se a largura ficar abaixo desse limite, a coloração preta predefinida será aplicada.
De fato, embora essa abordagem possa funcionar de forma eficaz, ela pode levar a uma proliferação de código que se torna cada vez mais incômoda, especialmente quando se tenta implementar várias nuances estilísticas sujeitas a critérios específicos. Felizmente, com o advento da capacidade de encapsular#### Media Queries diretamente nos atributos de estilo de um elemento individual, pode-se simplificar e consolidar sua lógica de apresentação de maneira mais concisa e coesa.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
A implementação atual oferece uma abordagem mais direta em comparação com seu antecessor, caracterizada por legibilidade aprimorada que permite aos usuários discernir a aplicação de estilos do navegador com base na consulta de mídia e na estrutura do elemento pai ao redor.
Como estilizar um site com estilos aninhados de CSS
É imperativo aplicar o conhecimento adquirido até agora construindo um site básico e utilizando a funcionalidade de estilo hierárquico do CSS. Para iniciar esse processo, estabeleça um diretório e atribua a ele um título de sua escolha. Dentro deste diretório, gere dois arquivos-“index.html” e “style.css”.
No arquivo HTML principal, é essencial incluir um espaço reservado ou código de esqueleto que forneça estrutura e funcionalidade básicas para a página da web. Este modelo, muitas vezes referido como código “boilerplate”, estabelece a base para o resto dos elementos na página para construir. Ele inclui componentes padrão, como cabeçalhos, meta tags, folhas de estilo e scripts necessários para renderização e interatividade adequadas. Ao incorporar esse código fundamental no arquivo index.htm, os desenvolvedores podem garantir consistência em todas as páginas e simplificar seu fluxo de trabalho evitando tarefas repetitivas.
<!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>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 anterior a este delineia a formatação de uma imitação de site de noticiário na Internet. Consequentemente, acesse o documento style.css e anexe a seguinte diretiva a ele:
.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 mencionado emprega técnicas avançadas de CSS para personalização visual abrangente do conteúdo da web. O seletor utilizado, indicado por “.container”, serve como base sobre a qual todos os outros elementos de design são construídos. Esta seleção particular pode ser facilmente acessada e manipulada através do emprego do símbolo e comercial (&). Após a execução em um navegador web, deve-se observar um layout esteticamente agradável composto por vários componentes meticulosamente organizados de acordo com especificações pré-definidas.
Você ainda precisa de um pré-processador CSS?
Embora o advento de estilos aninhados no CSS nativo possa sugerir utilidade diminuída para pré-processadores CSS, é essencial ter em mente que esses pré-processadores oferecem muito mais do que simplesmente recursos de aninhamento. Entre suas provisões estão construções como loops, mixins e funções, tornando-os recursos indispensáveis além do mero arranjo estilístico. A escolha entre empregar um pré-processador CSS ou evitar um depende das demandas e predileções específicas de cada cenário individual e da preferência do desenvolvedor.