Escribe hojas de estilo jerárquicas y fáciles de mantener usando el anidamiento nativo, reduciendo la redundancia de selectores.
Durante más de una década, el anidamiento fue la característica 'estrella' de preprocesadores como Sass. Permitía escribir CSS de una forma que reflejaba la estructura jerárquica del HTML, evitando repetir el nombre de las clases una y otra vez.
Ahora, el anidamiento es una característica nativa de CSS. Esto significa que podemos escribir código más limpio, agrupar estilos relacionados y mejorar la mantenibilidad sin necesidad de un paso de compilación o herramientas externas.
En esta lección aprenderemos las reglas del anidamiento nativo, el uso del selector ampersand (&) y cómo evitar los errores de especificidad más comunes.
Código que imita al HTML.
Tradicionalmente, si tenías un menú con enlaces y estados hover, tenías que repetir `.nav` en cada línea: `.nav { ... }`, `.nav a { ... }`, `.nav a:hover { ... }`. Esto no solo es tedioso, sino que dispersa la lógica del componente.
Con CSS Nesting, todo el bloque de estilos vive dentro del selector principal. Esto hace que mover o renombrar un componente sea mucho más sencillo y que el archivo CSS sea más fácil de leer de un vistazo.
Referenciando al padre.
El símbolo `&` es el 'Selector de Anidamiento'. Representa al elemento padre actual. Se usa principalmente para tres cosas:
1. **Pseudoclases**: `&:hover` o `&:focus`.
2. **Pseudoelementos**: `&::before` o `&::after`.
3. **Selectores combinados**: `&.is-active` para cuando el padre tiene una clase adicional.
No es exactamente igual a Sass.
Una diferencia clave con Sass es cómo se calcula la especificidad. En CSS Nativo, el anidamiento se trata internamente como si estuvieras usando la pseudoclase `:is()`. Esto significa que la especificidad del selector anidado se eleva a la del selector más específico dentro de su grupo.
Es un detalle técnico avanzado, pero la regla de oro es: no anides más de 3 niveles de profundidad para mantener tu CSS predecible y performante.
Mantén tu CSS limpio y organizado.
1. **Limita la profundidad**: No anides más de 3 niveles para evitar problemas de especificidad y rendimiento.
2. **Usa `&` para estados y combinaciones**: Esto mejora la legibilidad y evita confusiones.
3. **Agrupa estilos relacionados**: Mantén juntos los estilos que pertenecen al mismo componente o sección del sitio.
Lo que aún no puedes hacer.
Aunque el anidamiento nativo es poderoso, todavía tiene algunas limitaciones en comparación con los preprocesadores:
1. No puedes usar variables o mixins como en Sass.
2. No hay soporte para funciones o lógica condicional dentro del CSS.
3. El soporte de navegadores es bueno pero no universal, así que verifica la compatibilidad antes de usarlo en producción.
¿Qué podemos esperar?
El anidamiento nativo es solo el comienzo. A medida que los navegadores implementen más características de CSS, podríamos ver mejoras en la sintaxis de anidamiento, como la capacidad de anidar selectores de hermanos o incluso funciones dentro del CSS.
Mantente atento a las actualizaciones de las especificaciones de CSS y a las nuevas características que podrían hacer que tu código sea aún más limpio y eficiente.
Escribe hojas de estilo jerárquicas y fáciles de mantener usando el anidamiento nativo, reduciendo la redundancia de selectores.
Código del tema: display: grid; gap: 1rem;
Código que imita al HTML.
Tradicionalmente, si tenías un menú con enlaces y estados hover, tenías que repetir `.nav` en cada línea: `.nav { ... }`, `.nav a { ... }`, `.nav a:hover { ... }`. Esto no solo es tedioso, sino que dispersa la lógica del componente.
Con CSS Nesting, todo el bloque de estilos vive dentro del selector principal. Esto hace que mover o renombrar un componente sea mucho más sencillo y que el archivo CSS sea más fácil de leer de un vistazo.
Referenciando al padre.
El símbolo `&` es el 'Selector de Anidamiento'. Representa al elemento padre actual. Se usa principalmente para tres cosas:
1. **Pseudoclases**: `&:hover` o `&:focus`.
2. **Pseudoelementos**: `&::before` o `&::after`.
3. **Selectores combinados**: `&.is-active` para cuando el padre tiene una clase adicional.
Nota técnica: En el CSS nativo moderno, ya no es estrictamente obligatorio usar `&` para anidar elementos simples (como `div { p { ... } }`), pero se recomienda su uso para evitar ambigüedades y mejorar la claridad.
No es exactamente igual a Sass.
Una diferencia clave con Sass es cómo se calcula la especificidad. En CSS Nativo, el anidamiento se trata internamente como si estuvieras usando la pseudoclase `:is()`. Esto significa que la especificidad del selector anidado se eleva a la del selector más específico dentro de su grupo.
Es un detalle técnico avanzado, pero la regla de oro es: no anides más de 3 niveles de profundidad para mantener tu CSS predecible y performante.
Mantén tu CSS limpio y organizado.
1. **Limita la profundidad**: No anides más de 3 niveles para evitar problemas de especificidad y rendimiento.
2. **Usa `&` para estados y combinaciones**: Esto mejora la legibilidad y evita confusiones.
3. **Agrupa estilos relacionados**: Mantén juntos los estilos que pertenecen al mismo componente o sección del sitio.
Lo que aún no puedes hacer.
Aunque el anidamiento nativo es poderoso, todavía tiene algunas limitaciones en comparación con los preprocesadores:
1. No puedes usar variables o mixins como en Sass.
2. No hay soporte para funciones o lógica condicional dentro del CSS.
3. El soporte de navegadores es bueno pero no universal, así que verifica la compatibilidad antes de usarlo en producción.
¿Qué podemos esperar?
El anidamiento nativo es solo el comienzo. A medida que los navegadores implementen más características de CSS, podríamos ver mejoras en la sintaxis de anidamiento, como la capacidad de anidar selectores de hermanos o incluso funciones dentro del CSS.
Mantente atento a las actualizaciones de las especificaciones de CSS y a las nuevas características que podrían hacer que tu código sea aún más limpio y eficiente.
Muestra cómo anidar con claridad evitando selectores excesivamente profundos.
