Formateador CSS

Formatea o minifica CSS, ordena las propiedades y convierte px en rem, directamente en tu navegador.

Acerca de Formateador CSS

Qué es

El Formateador CSS hace que una hoja de estilos sea legible o compacta. Sangra las reglas, ordena las propiedades alfabéticamente o según el modelo de caja, convierte los px en rem y lleva todos los colores a un mismo formato. Además revisa el CSS mientras trabaja y se detiene ante llaves desequilibradas o una declaración rota en lugar de dar un resultado erróneo.

Funciones principales

  • Formato con 2 o 4 espacios, o minificado en una línea.
  • Orden de propiedades: alfabético o lógico, según el modelo de caja.
  • px → rem con tu propio tamaño de fuente base.
  • Todos los colores en HEX, RGB/RGBA o HSL.
  • Un filtro por selector que muestra solo los bloques que necesitas.
  • Errores para llaves desequilibradas, una declaración sin «propiedad: valor» y un valor vacío.

Cómo usarlo

  1. Pega CSS en el editor, abre un archivo .css o pulsa «Ejemplo».
  2. Elige «Formato» o «Minificar» y la sangría.
  3. Si hace falta, ajusta el orden de propiedades, px → rem y el formato de color.
  4. Copia el resultado o envíalo a otra herramienta.

Cuándo es útil

  • Leer el CSS minificado de una web o una librería.
  • Ordenar una hoja de estilos antes de una revisión de código.
  • Pasar un diseño de px a rem de una sola vez.

Privacidad y limitaciones

Tus datos

Tu CSS se procesa en el navegador y no se envía a ningún servidor: el sitio solo recibe un evento anónimo de «herramienta abierta», sin el contenido. Un resultado que envías a otra herramienta se queda 24 horas en este dispositivo, en «Actividad reciente». Un enlace de «Compartir» lleva el CSS dentro del propio enlace, así que compártelo solo con personas de confianza.

Limitaciones

  • Trabaja con CSS normal; SCSS, Less y otros preprocesadores no se admiten.
  • Un error detiene el resultado: corrige el punto que indica y la salida vuelve a aparecer.

Preguntas frecuentes

¿Qué hace el orden lógico?

Agrupa las propiedades en un orden fijo: primero el posicionamiento, luego display, tamaño, márgenes y padding, después la tipografía, los colores, fondos y bordes, y las animaciones al final. Las propiedades relacionadas quedan juntas.

¿Cómo se convierten los px en rem?

Cada valor en px se divide por el tamaño de fuente base —16 por defecto, así que 24px pasa a 1.5rem. Cambia el tamaño base si tu fuente raíz es otra.

¿Por qué aparece un error en lugar del CSS formateado?

La herramienta encontró algo que no puede leer con seguridad: una llave que falta, una declaración sin dos puntos o una propiedad sin valor. Corregirlo ahí da un resultado correcto en lugar de una suposición.