El anidado nativo de CSS ya es una realidad, esto lleva circulando un par de meses y comenzando a ser cada vez más compatible con navegadores, pero ¿por qué esta funcionalidad en CSS nativa es tan importante y ha sido tan hablada?, en este artículo vamos a hablar y ver un par de ejemplos de lo que podremos hacer.
Para escribir los estilos en CSS, tenemos muchas maneras, desde el CSS nativo, usar un framework que es lo que viene siendo más sonado para hacer estilos, CSS in JS como styled-components y los preprocesadores de CSS
Si has usado un preprocesador de CSS, como SASS, LESS o mi gran adoración STYLUS, sabrás que una de las principales ventajas de usarlos era el anidamiento de elementos, esto nos permitía tener un código más conciso y mejor ordenado cuando nos referíamos a especificidad.
Pero ahora, que aunque está aún en prueba, CSS nos permitirá usar este anidamiento, lo que nos da la ventaja de no configurar nada adicional en nuestro proyecto, como lo era en su momento usar webpack para configurar cada uno de estos preprocesadores.
Vamos a ver un ejemplo sencillo:
En una nueva carpeta de mi equipo he creado un par de archivos, un index.html y un index.css
Código Ejemplo
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<article>
<div class="container">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
<div class="child">Child 4</div>
</div>
<div>
Hola Mundo
</div>
</article>
</body>
</html>
index.css
* {
padding: 0;
margin: 0;
overflow: hidden;
}
article {
width: 100vw;
height: 100vh;
background-color: rgb(2, 0, 47);
display: flex;
align-items: center;
justify-content: center;
}
article div {
color: white;
height: 100px;
font-size: 3rem;
}
article .container{
padding: 50px;
background-color: rgb(124, 202, 230);
width: 80%;
height: 80%;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr ;
gap: 20px;
}
article .container .child{
background-color: cornflowerblue;
width: 100%;
height: 25%;
text-align: center;
font-size: 3rem;
}
article .container .child:hover{
background-color: chartreuse;
}
article .container .child::first-letter{
color: rgb(23, 23, 163);
}
Con este código vamos a obtener una página parecida a esta:
Anidar elementos CSS
Cuando hablamos de especificidad en CSS, vemos que tenemos que declarar los elementos, en este ejemplo tenemos al elemento article que contiene un div y otro más con la clase container y dentro tiene otros cuatro elementos div con la clase child.
He colocado un comportamiento con la pseudo-clase hover para que cambie el color cuando pasamos el mouse a ese verde en cada uno de los elementos hijos, y el pseudo-elemento first-letter para cambiar el color de la primera letra.
Aqui lo que vemos es que tenemos que ser específicos para qué elementos tomarán el comportamiento según nuestro código CSS, por ejemplo para darle estilos a cada elemento con la clase child, si es cierto que podríamos solo colocar la clase child y colocar sus respectivos estilos, si queremos ser específicos para evitar sobreponer o sobreescribir elementos, tenemos que ser específicos diciendo que todo elemento que esté dentro de un article dentro de un elemento con la clase container y que tenga la clase child va a recibir los estilos, que es como lo hemos escrito:
article .container .child{
... estilos
}
Pero el anidamiento de CSS es que nos permite escribir el código como en los preprocesadores:
article {
width: 100vw;
height: 100vh;
background-color: rgb(2, 0, 47);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
& div{
color: white;
height: 100px;
font-size: 3rem;
}
}
Aqui lo que hemos realizado es que dentro de los corchetes correspondientes al article, hemos escrito un &, y después el elemento div, y con esto queremos decir que todo elemento div que esté dentro de un article va a recibir los estilos que escribamos entre sus corchetes, esto sería idéntico a poner:
article div {}
Pero ahora lo que vemos es que todo se encuentra dentro del elemento article, podriamos decir que de cierta manera encapsulamos el elemento. Ahora es importante notar que el símbolo «&» nos sirve para decir que ele elemento está anidado, si no lo colocamos vamos a tener un error, pero esto solo será necesario si colocamos un elemento nombrándolo por su etiqueta como lo es un div, si hablamos de una clase o un id, que llevan un símbolo antes, esto no va a ser necesario, vemos el ejemplo con el mismo elemento article:
article {
width: 100vw;
height: 100vh;
background-color: rgb(2, 0, 47);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
& div{
color: white;
height: 100px;
font-size: 3rem;
}
.container {
padding: 50px;
background-color: rgb(124, 202, 230);
width: 80%;
height: 80%;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr ;
gap: 20px;
}
}
Aqui vemos que podemos anidar a la clase container dentro de article también esto, al igual que el ejemplo anterior sería lo mismo que colocar el código de la siguiente manera:
article container {}
Peroi al igual podemos anidar elementos dentro de los elementos que ya se encuentran anidados, recuerdas que tenemos 4 elementos con la clase child, bueno, es momento de usar esta propiedad para colocarlos dentro de container, y quedaría de la siguiente manera:
article {
...
& div{
...
}
.container {
...
.child {
background-color: cornflowerblue;
width: 100%;
height: 25%;
text-align: center;
font-size: 3rem;
}
}
}
Esto sería lo equivalente a tener:
article container child {}
Pero como vemos es que podemos «encapsular» nuestros estilos en cada uno de los elementos anidándolos, esto con los preprocesadores ayudaba mucho, ya que en lugar de buscar todo específicamente para cada una de las líneas en nuestro código, es que ya podemos ver todos los elementos en un solo bloque y cómo se relacionan elementos padres, hijos y hermanos.
Pseudo-clases y pseudo-elementos
Igual que las clases, id’ s y etiquetas, podemos anidar dentro del elemento el comportamiento, por supuesto que en este caso le tenemos que colocar antes el &, por ejemplo &:hover o podemos dejarlo como hacemos anteriormente colocando el nombre del elemento y después el pseudo-elemento o la pseudo-clase como seria .child::first-letter, entonces quedaría de la siguiente manera:
article {
...
& div{
...
}
.container {
...
.child {
...
&:hover{
background-color: chartreuse;
}
}
.child::first-letter {
color: rgb(23, 23, 163);
}
}
}
Antes de que pasemos a si esto es el fin de los preprocesadores, te dejaré el código CSS completo de este ejercicio, el resultado es el mismo, ya que ambas maneras de escribir el código son válidas, pero debes de tener en cuenta que esta funcionalidad sigue en pruebas, y aunque los navegadores lo han ido adaptando, aún no es 100% compatible, si visitamos el sitio caniuse vamos a ver que solamente cuenta con compatibilidad del 75.49%, por lo que aún falta para poder ser usada en su totalidad.
Ahora sí, el código es el siguiente:
* {
padding: 0;
margin: 0;
overflow: hidden;
}
article {
width: 100vw;
height: 100vh;
background-color: rgb(2, 0, 47);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
& div{
color: white;
height: 100px;
font-size: 3rem;
}
.container {
padding: 50px;
background-color: rgb(124, 202, 230);
width: 80%;
height: 80%;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr ;
gap: 20px;
.child {
background-color: cornflowerblue;
width: 100%;
height: 25%;
text-align: center;
font-size: 3rem;
&:hover{
background-color: chartreuse;
}
}
.child::first-letter {
color: rgb(23, 23, 163);
}
}
}
¿El fin de los preprocesadores?
Esta funcionalidad en mi opinión, si viene a reemplazar mucho acerca de la funcionalidad de los preprocesadores, por eso es que me gusta tanto stylus y a su sintaxis, por que lo primero que nos había llegado a CSS eran las variables y ahora esto, pero esto no es todo lo que llegan a a hacer los preprocesadores, ya que por decirte algo, es como tener propiedades de un lenguaje de programación para poder aplicar estilos, entonces todavía veo que tienen algunas ventajas sobre CSS nativo,
Como hace unos años veía que era una constante saber preprocesadores, siguen habiendo, y habrá muchos proyectos que sigan implementándolos, donde he visto mucho en ofertas, ha sido en SASS, últimamente he visto también relevante conocer un framework de CSS.
Puede ser que muchos ya no opten por aprender o usar estas tecnologías, aún no sabría decir que ya no se utilizarán, y también habrá que prestar más atención a cómo evoluciona CSS para poder tomar una decisión, por el momento no creo que esté mal probarlos, en mi caso ya he usado mucho más CSS in JS y aprender el nuevo anidado de CSS para mi opinión va a ser obligatorio aprenderlo.
Aprende CSS
Si vas comenzando o quieres reforzar conocimiento sobre las tecnologías que hablamos en este artículo, te dejaremos los cursos:
Igualmente te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago
O igualmente puedes optar por cada curso de manera individual en Udemy.
Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.
¡Hasta la próxima!, y chao mundo
Comments (1)
Mantente actualizado en CSS | View Transitions | State of CSS 2023 – Hola Mundosays:
septiembre 16, 2023 at 11:30 am[…] Otra de las funcionalidades más habladas es sobre el CSS anidado que nos permitirá escribir CSS como si estuviéramos haciendo uso de un preprocesador de CSS como SASS, pero de este ya hemos realizado un ejemplo de cómo se llega a utilizar para nuestros proyectos y se encuentra mucha más compatible que view transitiosns, te dejaremos el enlace a: ¿Cómo se usa el anidado en CSS nativo? | CSS Nesting. […]