Cómo usar esta herramienta para desarrolladores
- Pega la hoja CSS.
- Ejecuta la inspección.
- Revisa hallazgos de especificidad, !important y duplicados.
- Prioriza los elementos que dificultan mantenimiento o sobrescritura.
CSS Inspector
Obtén una radiografía rápida de una hoja CSS antes de refactorizarla. El inspector cuenta reglas y declaraciones, identifica custom properties, usos de !important, selectores largos y propiedades repetidas dentro de una misma regla. También calcula una especificidad aproximada para destacar selectores difíciles de sobrescribir. El resultado está orientado a diagnóstico y mantenimiento, no a imponer una guía de estilo concreta.
Datos de entrada
Diagnóstico CSSEspacio publicitario
Qué hace esta herramienta para desarrolladores
Analiza características de mantenimiento: especificidad aproximada, longitud de selectores, prioridades !important, custom properties y duplicados dentro de reglas.
La especificidad se aproxima como IDs ×100 + clases/atributos/pseudoclases ×10 + elementos/pseudoelementos. No pretende resolver todos los casos de :is(), :where() o :not().
Un hallazgo no implica necesariamente un error; es una señal para revisar decisiones de cascada y mantenibilidad.
Ejemplo
Entrada
#app .menu > li.active a { color: red !important; }Salida
ALTA ESPECIFICIDAD · #app .menu > li.active a · ≈ 123 !important · color
Casos de uso
- Auditar CSS heredado.
- Localizar deuda de especificidad.
- Revisar un componente antes de migrarlo a otra arquitectura.
Consejos para obtener resultados fiables
- Trata !important como señal, no como fallo automático.
- Revisa primero selectores con IDs combinados con muchas clases.
- Mantén custom properties con nombres consistentes.
- Verifica duplicados porque a veces son fallbacks intencionados.
Detalles del procesamiento
Se recorre CSSOM para métricas generales y se inspecciona el texto serializado de cada regla. La especificidad es deliberadamente aproximada para mantener la herramienta independiente de librerías.
No calcula la cascada real entre elementos DOM ni resuelve completamente especificidad de selectores funcionales modernos. Tampoco conoce convenciones BEM, utility-first u otras políticas de equipo.
Preguntas frecuentes
¿Cómo calcula la especificidad el CSS Inspector?
Usa una aproximación ponderada de IDs, clases/atributos/pseudoclases y elementos. Sirve para detectar selectores pesados, no como sustituto del algoritmo completo de Selectors Level 4.
¿Todos los usos de !important son un problema?
No. El inspector los señala porque pueden complicar sobrescrituras, pero algunos sistemas los usan de forma deliberada.
¿Detecta propiedades CSS duplicadas dentro de una regla?
Sí. Señala nombres repetidos, aunque no determina si son fallbacks intencionados.
¿El inspector analiza la cascada sobre una página HTML real?
No. Trabaja solo con la hoja CSS y no evalúa qué regla gana sobre elementos concretos.
¿Qué se considera un selector complejo?
La herramienta marca selectores con especificidad aproximada alta o con una cadena larga de partes, para facilitar una revisión manual.
Herramientas relacionadas para desarrolladores
Módulos del procesamiento
| Módulo | Función |
|---|---|
| Especificidad | Estimación para priorizar revisión |
| Deuda de cascada | !important y selectores complejos |
| Consistencia | Duplicados y custom properties |
Explora más herramientas de HTML, CSS y JavaScript
Consulta el centro de categoría para acceder a validadores, analizadores, generadores y utilidades relacionadas.