Error Llaves CSS sin cerrar o huérfanas
Por qué toda { necesita una } correspondiente, y cómo una sola llave faltante puede tragarse en silencio el resto de una hoja de estilos.
Esto cubre dos problemas: una } de cierre sin apertura correspondiente (orphan-closing-brace), y un bloque de regla o at-rule que se abre pero nunca se cierra (unclosed-block).
Ejemplo
/* Incorrecto: falta la llave de cierre */
.tarjeta {
padding: 1rem;
.boton { color: blue; }
/* Correcto */
.tarjeta {
padding: 1rem;
}
.boton { color: blue; }Por qué importa
El análisis de CSS se guía por llaves — el parser rastrea la profundidad de anidamiento contando { y }. Una sola llave de cierre faltante no solo rompe la regla a la que pertenece; cada selector y declaración posterior queda tragado dentro de ese bloque sin cerrar hasta que el parser encuentra la siguiente }, momento en el cual todo se realinea de forma impredecible. Esta es una de las causas más comunes de errores del tipo "la mitad de mi hoja de estilos simplemente dejó de aplicarse", y a menudo es invisible a simple vista en un archivo largo.
Frequently asked questions
¿Por qué una sola llave faltante rompe reglas no relacionadas más abajo?
Porque el parser no sabe que el bloque debía terminar ahí — sigue leyendo todo lo que sigue como parte de la lista de declaraciones de esa misma regla, hasta que llega a una } que lo resincroniza. Todo lo que está en medio se malinterpreta, no simplemente se salta.
¿Un editor de código detecta esto automáticamente?
La mayoría de los editores con resaltado de sintaxis CSS o un linter (como Stylelint) van a marcar los desajustes de llaves de inmediato mediante emparejamiento de paréntesis y subrayados de error, que es la forma más rápida de detectar esto antes de publicar.