Validador de CSS

¿Por qué validar CSS?

Las declaraciones CSS inválidas son ignoradas silenciosamente por los navegadores en vez de causar un error. Un error de tipeo en el nombre de una propiedad o un valor no soportado hace que un estilo falle de forma invisible — la regla simplemente no tiene efecto, sin ninguna advertencia en el navegador. La validación de CSS detecta estos problemas antes de que lleguen a producción, donde son más difíciles de detectar y depurar.

Errores y advertencias comunes de validación de CSS

• Nombres de propiedad desconocidos — errores de tipeo como backround en vez de background, o propiedades propietarias de un navegador que no existen en la especificación.
• Valores inválidos — una cadena de texto donde se espera una longitud, un formato de color que no se puede interpretar, o un valor fuera del rango permitido.
• Propiedades duplicadas — dos declaraciones para la misma propiedad en la misma regla; solo gana la última, dejando la primera como código muerto.
• Prefijos de proveedor sin la propiedad estándar — -webkit-transform sin transform fallará en navegadores que no sean WebKit.
• Abuso de !important — una cantidad alta de declaraciones !important suele indicar un problema en la arquitectura de especificidad.
• Reglas vacías — selectores sin ninguna declaración; agregan sobrecarga de análisis sin ningún efecto.

Validador CSS del W3C (Jigsaw)

El W3C CSS Validation Service oficial (en jigsaw.w3.org/css-validator/) revisa el CSS contra la especificación formal de CSS publicada por el W3C. Valida contra un perfil de CSS específico (CSS 2.1, CSS nivel 3, etc.) y puede revisar código pegado o una URL en vivo. Esta herramienta realiza las mismas verificaciones comunes, con un enfoque en los problemas con más probabilidad de causar problemas reales de renderizado — propiedades desconocidas, valores inválidos, declaraciones duplicadas y especificidad.

Para un cumplimiento estricto de la especificación (particularmente útil al publicar librerías CSS o al trabajar con user agents más antiguos), usa el validador del W3C. Para detectar rápidamente problemas prácticos en hojas de estilo de producción, usa esta herramienta.

Especificidad en CSS

Cuando varias reglas apuntan al mismo elemento, el navegador usa la especificidad para decidir qué declaración se aplica. La jerarquía de especificidad de mayor a menor: estilos en línea → selectores de ID → selectores de clase/atributo/pseudo-clase → selectores de elemento/pseudo-elemento. Una regla con un selector de ID (#nav) le gana a un selector de clase (.nav) sin importar el orden en el código fuente.

La especificidad alta crea problemas de mantenimiento — sobrescribir una regla de especificidad alta requiere una regla de especificidad aún más alta, lo que puede escalar hacia el uso de !important y estilos difíciles de predecir.

¿Qué es CSS? Cascading Style Sheets explicado

CSS (Cascading Style Sheets, hojas de estilo en cascada) es el lenguaje que controla la presentación visual de los documentos HTML — diseño, colores, tipografías, espaciado y comportamiento responsivo. "Cascada" se refiere al algoritmo que resuelve conflictos cuando varias reglas apuntan al mismo elemento: la especificidad, el orden en el código fuente y la bandera !important determinan cuál declaración gana.

CSS es mantenido por el W3C (World Wide Web Consortium) e implementado por los fabricantes de navegadores. El soporte de los navegadores para funciones individuales de CSS varía — usa una referencia como las tablas de compatibilidad de navegadores de MDN para confirmar si una función es soportada en tus navegadores objetivo antes de depender de ella.

Propiedades personalizadas de CSS (variables)

Las propiedades personalizadas (declaradas como --nombre-propiedad: valor y referenciadas con var(--nombre-propiedad)) son una función nativa de CSS para guardar valores reutilizables. A diferencia de las variables de los preprocesadores (Sass, Less), las propiedades personalizadas están vivas en el navegador — hacen cascada y se pueden sobrescribir en cualquier nivel del DOM con un selector más específico. Esto las hace ideales para theming y cambios de valores dinámicos mediante JavaScript.

Referencia completa de problemas

Cada problema que reporta esta herramienta tiene su propia página de referencia explicando qué significa, por qué importa y cómo solucionarlo, con un enlace a la documentación de MDN correspondiente. Explora la referencia completa de problemas de validación CSS.

Preguntas frecuentes