CSS - Herramientas para Limpieza y Formateo

Ideal para eliminar estilos que no aparecen en tus archivos HTML/JS.

Instalación global:

npm install -g purgecss

Uso básico (múltiples archivos CSS):

# Crear carpeta de salida
mkdir -p purged
 
# Limpiar CSS no usado
purgecss --css static/css/*.css --content templates/index.html --output purged/

Nota: Asegúrate de que las rutas coincidan con tu estructura de proyecto (ej. Flask: templates/, static/).

Reduce tamaño y simplifica selectores idénticos (ej. combina múltiples reglas con el mismo color: …).

Instalación global:

npm install -g csso-cli

Uso:

csso input.css -o output.css

CSSTO elimina comentarios y minifica. Si necesitas mantener legibilidad, usa PostCSS o CleanCSS en su lugar.

Hace el CSS legible con sangrías, espacios y saltos de línea consistentes.

Instalación global:

npm install -g prettier

Uso:

# Formatear y sobrescribir
prettier --write styles.css
 
# Formatear varios archivos
prettier --write "static/css/*.css"

Prettier funciona también con HTML, JS, JSON, etc.

# 1. Limpiar CSS no usado
purgecss --css static/css/*.css --content templates/**/*.html --output purged/
 
# 2. Optimizar lógicamente (combinar reglas)
csso purged/style.css -o optimized.css
 
# 3. Formatear para legibilidad (opcional, útil en desarrollo)
prettier --write optimized.css

• No uses sudo npm install -g: rompe permisos y seguridad.
• Prefiere instalaciones globales personales (con ~/.npm-global) para herramientas de CLI.
• Usa npx si prefieres evitar instalaciones globales: npx purgecss …
• CSSTO es para producción (minifica); Prettier es para desarrollo (legibilidad).
• Si tu CSS viene de un builder visual (Webflow, etc.), considera reescribir
• clases redundantes manualmente para mayor eficiencia.