Cómo analizar variables CSS sin usar

Pega un fragmento CSS para obtener sus propiedades personalizadas reconocidas, el recuento de referencias var() y las declaraciones sin coincidencia. El resultado solo cubre los patrones reconocidos dentro del texto proporcionado.

Qué puedes comprobar

Esta herramienta sirve para revisar un fragmento de CSS y localizar propiedades personalizadas que se declaran, pero no aparecen utilizadas mediante var(). También permite comprobar cuántas referencias reconocidas existen para cada nombre, de modo que puedes hacer una primera revisión de variables antes de limpiar o reorganizar una hoja de estilos.

Pega el texto CSS en el campo de entrada y revisa el análisis devuelto. La herramienta trabaja con los patrones reconocidos en las declaraciones de propiedades personalizadas y en las referencias var(), por lo que el resultado debe entenderse como una comprobación específica de esos patrones, no como una validación completa del CSS.

Pasos para analizar el CSS

1. Reúne el fragmento CSS que quieras revisar. Incluye las declaraciones de propiedades personalizadas y las reglas donde se utilicen. Por ejemplo, una declaración puede tener la forma --color-base: #fff;, mientras que una referencia puede aparecer como var(--color-base).

2. Pega el texto en el campo de entrada de CSS. Si se proporcionan dos entradas compatibles, se utiliza la entrada de texto que no esté vacía con preferencia sobre el otro valor. Si el texto seleccionado está vacío, el procesamiento devuelve un resultado no satisfactorio.

3. Ejecuta el análisis y consulta la lista de declaraciones reconocidas. Se identifican los nombres que empiezan por dos guiones, contienen caracteres de palabra o guiones y tienen dos puntos, un valor y punto y coma. Los valores extraídos se muestran sin los espacios exteriores.

4. Revisa el recuento de referencias por nombre. Se reconocen las expresiones que empiezan por var(--nombre) y se cuenta cada referencia reconocida, incluido el contenido opcional dentro de sus paréntesis.

5. Comprueba el apartado de declaraciones sin referencia. La herramienta compara los nombres de las declaraciones reconocidas con los nombres de referencia reconocidos y señala las declaraciones que no tienen coincidencia. Antes de eliminar una variable, contrasta ese resultado con el resto de tu proyecto, porque el análisis se limita al texto suministrado.

Cómo interpretar el resultado

El resultado correcto incluye las declaraciones reconocidas, el total de declaraciones, el total de declaraciones sin referencia y un recuento de referencias para cada nombre detectado. Una declaración puede aparecer como no referenciada aunque exista una referencia fuera del fragmento analizado o en una forma que no coincida con el patrón reconocido.

Del mismo modo, una referencia reconocida no demuestra que exista una declaración correspondiente en el texto. El análisis cuenta nombres y compara coincidencias; no evalúa el valor final de una variable ni resuelve sus valores alternativos. Usa los hallazgos para orientar una revisión manual, especialmente antes de borrar una propiedad personalizada o modificar una regla.

Si el procesamiento encuentra una excepción, se devuelve un resultado no satisfactorio en lugar de propagarla. En ese caso, revisa el contenido introducido y vuelve a intentarlo con un fragmento CSS acotado.

Ejemplo práctico

Una hoja de estilos define --color-base: #fff; y --espaciado: 1rem;, utiliza var(--color-base) y contiene var(--margen, 1rem) en otra regla.

Pega el fragmento en la entrada CSS y ejecuta el análisis; después consulta la lista de declaraciones y los recuentos por nombre.

El resultado contiene las declaraciones reconocidas --color-base y --espaciado, el total de declaraciones, el recuento de --color-base y --margen, y --espaciado dentro de las declaraciones sin referencia.

Limitaciones

• El resultado se limita a los patrones reconocidos en el texto suministrado; no representa una evaluación de todos los usos posibles de las variables CSS ni de sus valores.

Errores frecuentes

• Causa: el texto seleccionado está vacío. Acción: introduce un fragmento CSS que contenga las declaraciones o referencias que quieras revisar y ejecuta de nuevo el análisis.

Preguntas frecuentes

¿Qué ocurre si no introduzco CSS?

Si el texto seleccionado está vacío, el resultado no es satisfactorio; introduce CSS antes de ejecutar el análisis.

¿Qué entrada se analiza cuando hay dos valores?

Si proporcionas ambas entradas compatibles, se da preferencia al valor de texto que no esté vacío frente al otro valor CSS.

¿Qué información muestra el análisis?

El resultado incluye las declaraciones reconocidas, sus totales, las declaraciones sin referencia y el recuento de referencias por nombre.