Cómo usar esta herramienta para desarrolladores
- Pega CSS con custom properties dentro de bloques.
- Elige orden ascendente o descendente.
- Ejecuta la ordenación.
- Compara el resultado y copia el CSS.
CSS Custom Property Sorter
Ordena declaraciones de propiedades personalizadas CSS por nombre sin mezclar variables entre bloques. Mantiene cada selector o bloque de primer nivel, separa las declaraciones --* de otras reglas y ofrece un modo ascendente o descendente para normalizar secciones de tokens.
Datos de entrada
CSS con bloques de variablesEspacio publicitario
Qué hace esta herramienta para desarrolladores
Reordena solo las declaraciones que comienzan por -- dentro de cada bloque analizado. Las declaraciones normales permanecen después del grupo de variables en el orden en que aparecían.
Se procesan bloques simples de primer nivel. Las custom properties se clasifican con localeCompare por nombre y se reconstruye el contenido con una declaración por línea.
La herramienta está pensada para bloques de variables sencillos. No debe usarse como formatter CSS general para sintaxis anidada compleja.
Ejemplo
:root { --z: 1; --a: 2; }
→ :root {
--a: 2;
--z: 1;
}
Casos de uso
- Mantener ordenados design tokens.
- Reducir ruido en revisiones de código.
- Normalizar bloques :root.
- Preparar archivos de variables antes de comparar cambios.
Consejos para obtener resultados fiables
- Ordena dentro de cada ámbito; no muevas tokens entre temas.
- Revisa comentarios asociados a una variable antes de reorganizar manualmente.
- Usa un formatter CSS después si necesitas estilo global consistente.
- No asumas que el orden alfabético expresa dependencias semánticas.
Detalles del procesamiento
El procesador identifica bloques sin anidación interna, separa declaraciones por punto y coma y ordena las que comienzan por --. Cuenta cuántas cambian de posición respecto al conjunto de variables del bloque.
No conserva comentarios intercalados dentro del bloque con fidelidad total y no procesa correctamente CSS anidado o at-rules con bloques internos.
Preguntas frecuentes
¿Qué tipo de entrada acepta CSS Custom Property Sorter?
Acepta bloques CSS simples que contengan declaraciones --nombre: valor.
¿Cómo trata CSS Custom Property Sorter el HTML o CSS no válido?
Si hay bloques anidados complejos, el analizador puede dejarlos sin modificar o requerir revisión manual.
¿Los datos que pego en CSS Custom Property Sorter se envían a un servidor?
No. El procesamiento principal se ejecuta localmente en el navegador y no necesita una API externa.
¿Puedo usar el resultado de CSS Custom Property Sorter directamente en mi proyecto?
Sí, pero conviene revisarlo cuando la entrada contenga sintaxis ambigua, fragmentos incompletos o datos generados por terceros.
¿Funciona CSS Custom Property Sorter con texto Unicode y caracteres acentuados?
Sí. La herramienta trabaja con cadenas JavaScript y conserva Unicode; en descargas utiliza UTF-8.
Herramientas relacionadas para desarrolladores
Resumen técnico
| Módulo | Función |
|---|---|
| Entrada | CSS con bloques de variables |
| Procesamiento | Local en el navegador |
| Salida | .css y exportaciones cuando corresponda |
Explora la categoría HTML, CSS y JavaScript
Consulta más utilidades para inspeccionar, transformar y validar código del navegador.