Cómo crear un analizador de uso de CSS para sitios web grandes de WordPress

Crea una aplicación para analizar el uso de CSS en un sitio web grande de WordPress con más de 1000 páginas, identificando los elementos no utilizados y organizando las reglas heredadas para optimizar la estructura y el rendimiento de CSS.

Create your own plan

Learn2Vibe AI

Online

What do you want to build?

Resumen Simple

Desarrollar una aplicación para analizar el uso de CSS en un sitio web grande de WordPress, identificando los elementos no utilizados y las posibles reglas heredadas para su optimización.

Documento de Requisitos del Producto (PRD)

Objetivos:

Desarrollar una aplicación para analizar el uso de CSS en un sitio web grande de WordPress
Identificar las reglas de CSS para los elementos que ya no se utilizan
Detectar el CSS que se podría mover a un módulo heredado
Optimizar la estructura de CSS para mejorar el rendimiento y la mantenibilidad

Público objetivo:

Desarrolladores web y administradores de sitios que manejan sitios web grandes de WordPress

Características clave:

Capacidad de escanear múltiples páginas (1000+) de un sitio web de WordPress
Análisis de uso de CSS en archivos HTML y JavaScript
Identificación de reglas de CSS no utilizadas
Sugerencia de reglas que podrían trasladarse a un módulo heredado
Compatibilidad con estructuras de CSS modulares

Flujos de Usuario

N/A

Especificaciones Técnicas

Información no disponible en la conversación.

Puntos de API

N/A

Esquema de Base de Datos

N/A

Estructura de Archivos

css-analyzer/
├── src/
│   ├── scanner/
│   │   ├── page_scanner.py
│   │   └── css_analyzer.py
│   ├── utils/
│   │   ├── wp_connector.py
│   │   └── file_handler.py
│   └── main.py
├── tests/
│   ├── test_scanner.py
│   └── test_utils.py
├── config/
│   └── settings.yml
├── requirements.txt
└── README.md

Plan de Implementación

Configurar la estructura del proyecto y el entorno
Desarrollar el conector de WordPress para acceder a las páginas del sitio
Crear un escáner de páginas para extraer el contenido HTML y JS
Implementar el extractor de reglas de CSS de los archivos CSS modulares
Desarrollar el analizador de uso de CSS para identificar las reglas no utilizadas
Crear la lógica para sugerir reglas para el módulo heredado
Implementar un mecanismo de generación de informes para los resultados del análisis
Desarrollar pruebas unitarias para cada componente
Realizar pruebas de integración con un sitio de WordPress de muestra
Optimizar el rendimiento para sitios a gran escala
Crear documentación e instrucciones de uso

Estrategia de Despliegue

Información no disponible en la conversación.

Justificación del Diseño

La aplicación está estructurada para manejar un sitio web de WordPress a gran escala con CSS modular. Los componentes de escáner y analizador se separan para permitir flexibilidad en el procesamiento de diferentes tipos de páginas y estructuras de CSS. El conector de WordPress garantiza la compatibilidad con el sistema propietario mencionado, mientras que el enfoque modular permite una fácil expansión o modificación de los criterios de análisis en el futuro.