El anidamiento de CSS nativo puede simplificar su código CSS y mejorar su experiencia de codificación general.

Históricamente, CSS ha sido un lenguaje difícil para trabajar. Los preprocesadores de CSS facilitaron el trabajo con CSS y también proporcionaron características adicionales como bucles, mixins y más. A lo largo de los años, CSS se ha vuelto más capaz y ha adoptado algunas de las funciones introducidas originalmente por los preprocesadores de CSS. Una de esas características es el "estilo anidado".

El estilo anidado permite a los desarrolladores anidar reglas CSS una dentro de otra, reflejando la estructura HTML. Esto da como resultado un código más organizado y legible, ya que la relación entre los elementos HTML y sus estilos correspondientes es visualmente evidente.

Estilo anidado: la forma antigua

Estilo anidado es una característica disponible en muchos Preprocesadores CSS como Sass, Stylus y Menos CSS. Aunque la sintaxis puede diferir entre estos preprocesadores, el concepto subyacente se mantiene constante. Si quisieras darle estilo a todos los

instagram viewer
h1 elementos en un división con el nombre de clase de envase, en CSS regular, escribirías:

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

En un preprocesador de CSS como Less CSS, implementa un estilo anidado como este:

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

El bloque de código anterior logra los mismos resultados que la implementación normal de CSS, pero facilita que cualquier desarrollador que lea el código comprenda lo que está sucediendo. Este sentido de "jerarquía" fue uno de los mayores puntos de venta de los preprocesadores CSS.

El árbol de anidamiento se puede anidar a cualquier profundidad sin limitaciones, pero es esencial ser cauteloso, ya que un anidamiento demasiado profundo puede generar verbosidad en el código.

Estilo anidado nativo en CSS

No todos los navegadores incluyen soporte para estilos anidados nativos. El Puedo usar... El sitio web puede ayudarlo a verificar si su navegador de destino es compatible con esta función.

El estilo anidado nativo en CSS funciona de manera similar a los preprocesadores de CSS, lo que significa que es posible anidar cualquier selector dentro de otro. Pero hay una diferencia clave que debe tener en cuenta. Eche un vistazo al bloque de código a continuación:

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>

En el bloque de código anterior, el div con el nombre de clase envase tiene un color de fondo rojo. El estilismo para el h1 elemento se encuentra en el .envase bloquear. Este h1 elemento tiene el color amarillo. Cuando ejecuta este código en el navegador, es posible que note algo mal. El navegador aplica correctamente un color de fondo rojo a la envase div, pero el h1 no tiene el estilo apropiado.

Esto se debe a que el estilo anidado funciona de manera un poco diferente en CSS en comparación con los preprocesadores de CSS como Less. No puede hacer referencia directamente a un elemento HTML en un árbol anidado. Para arreglar esto, necesitas usar un ampersand (&) como se ilustra a continuación:

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

En el bloque de código anterior, & actúa como una referencia al selector principal. Poniendo el ampersand antes del h1 El elemento debe informar al navegador que está apuntando a todos los niños. h1 elementos en el envase división Cuando ejecute el código en el navegador, debería ver lo siguiente:

Desde & es el símbolo utilizado para hacer referencia a un elemento principal, es muy posible apuntar a las pseudoclases y pseudoelementos de un elemento como este:

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

Antes de la implementación del estilo anidado de CSS, si pretendía aplicar estilos condicionalmente, dependiendo del ancho del navegador, tenía que recurrir a un método como el siguiente:

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

Cuando el navegador representa la página, determina el color de la pag elemento basado en el ancho del navegador. Si el ancho del navegador supera los 750 px, utiliza el color gris; de lo contrario, aplica el color predeterminado (negro).

Esta implementación funciona bien, pero como puede imaginar, las cosas pueden volverse bastante detalladas rápidamente, especialmente cuando necesita aplicar diferentes estilos según ciertas reglas. Ahora es posible anidar preguntas de los medios directamente en el bloque de estilo de un elemento.

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

Este bloque de código hace básicamente lo mismo que el anterior, pero tiene la ventaja de ser fácil de entender. Simplemente observando la consulta de medios y el elemento principal anidado, puede saber cómo el navegador aplicará los estilos apropiados cuando se cumplan las condiciones definidas.

Diseñar un sitio web con estilos anidados CSS

Es hora de poner en práctica todo lo que has aprendido hasta ahora construyendo un sitio web simple y aprovechando la función de estilo anidado en CSS. Crea una carpeta y nómbrala como quieras. En esa carpeta, crea un índice.htm y un estilo.css archivo.

En el índice.htm archivo, agregue el siguiente código repetitivo:

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>

El bloque de código anterior define el marcado para un sitio web de noticias simulado. A continuación, abra el estilo.css archivo y agregue el siguiente 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;
 }
}

El bloque de código anterior diseña el sitio web completamente con estilo anidado CSS. El .envase selector actúa como la profundidad de la raíz. Puede hacer referencia a este selector usando el & símbolo. Cuando ejecute el código en el navegador, debería ver lo siguiente:

¿Todavía necesita un preprocesador CSS?

Con la introducción de estilos anidados en CSS nativo, los preprocesadores de CSS pueden parecer innecesarios. Sin embargo, es crucial tener en cuenta que los preprocesadores de CSS ofrecen más que un estilo anidado. Proporcionan características como loops, mixins, funciones y más. En última instancia, el uso o no de un preprocesador CSS depende de su caso de uso específico y sus preferencias personales.