====== CSS - Herramientas para Limpieza y Formateo ======


===== PurgeCSS – Elimina CSS no usado =====

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

Instalación global:

<code bash>
npm install -g purgecss
</code>

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

<code bash>
# Crear carpeta de salida
mkdir -p purged

# Limpiar CSS no usado
purgecss --css static/css/*.css --content templates/index.html --output purged/
</code>

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

===== CSSTO – Optimiza y combina reglas redundantes =====

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

Instalación global:

<code bash>
npm install -g csso-cli
</code>

Uso:

<code bash>
csso input.css -o output.css
</code>

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

===== Prettier – Formatea (beautify) CSS =====

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

Instalación global:

<code bash>
npm install -g prettier
</code>

Uso:

<code bash>
# Formatear y sobrescribir
prettier --write styles.css

# Formatear varios archivos
prettier --write "static/css/*.css"
</code>

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

===== Flujo recomendado para proyectos web (ej. Flask) =====

<code bash>
# 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
</code>

===== Consejos clave =====

  * 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.