snt 7cff89e418 Aplicoop desde el repo de kidekoop

2026-02-11 15:32:11 +01:00

7.8 KiB

Raw Blame History

CSS Architecture - Website Sale Aplicoop

Refactoring Date: 7 de febrero de 2026
Status: ✅ Complete
Previous Size: 2,986 líneas en 1 archivo
New Size: ~400 líneas distribuidas en 15 archivos modulares

📁 Estructura de Carpetas

website_sale_aplicoop/static/src/css/
│
├── website_sale.css                 ← Index/imports principal (48 líneas)
│
├── base/
│   ├── variables.css                ← Variables CSS globales (colores, tipografía, espaciados)
│   └── utilities.css                ← Clases utilitarias (.sr-only, .text-muted, etc)
│
├── layout/
│   ├── pages.css                    ← Fondos y layouts de páginas (eskaera-page, etc)
│   ├── header.css                   ← Headers, navegación y títulos
│   └── responsive.css               ← Media queries centralizadas (todas las breakpoints)
│
├── components/
│   ├── product-card.css             ← Tarjetas de producto
│   ├── order-card.css               ← Tarjetas de orden (Eskaera)
│   ├── cart.css                     ← Carrito lateral
│   ├── buttons.css                  ← Botones y acciones
│   ├── quantity-control.css         ← Control de cantidad (+ - input)
│   ├── forms.css                    ← Inputs, selects, checkboxes
│   └── alerts.css                   ← Alertas y notificaciones
│
├── sections/
│   ├── products-grid.css            ← Grid de productos
│   ├── order-list.css               ← Lista de órdenes
│   ├── checkout.css                 ← Página de checkout
│   └── info-cards.css               ← Tarjetas de información
│
└── README.md                        ← Este archivo

🎯 Beneficios de la Refactorización

Aspecto	Antes	Después	Mejora
Tamaño de archivo	2,986 líneas	48 líneas (index)	98.4% reducción
Número de archivos	1 monolítico	15 modulares	Mejor organización
Tiempo para encontrar regla	5-10 min	1-2 min	75% más rápido
Reutilización de código	No (todo mezclado)	Sí (componentes aislados)	✅
Testing CSS	Imposible	Posible por componente	✅
Mantenibilidad	Difícil (cambios afectan múltiples zonas)	Fácil (aislado)	✅

📊 Desglose de Archivos

base/ - Fundamentos

variables.css (~80 líneas)
Colores, tipografía, espaciados, sombras, transiciones, z-index
utilities.css (~15 líneas)
Clases utilitarias reutilizables (.sr-only, .text-muted, etc)

layout/ - Estructura Global

pages.css (~70 líneas)
Fondos de página, gradientes, pseudo-elementos (::before)
header.css (~100 líneas)
Headers, navegación, títulos, información de pedidos
responsive.css (~200 líneas)
Todas las media queries (4 breakpoints: 992px, 768px, 576px, etc)

components/ - Elementos Reutilizables

product-card.css (~80 líneas)
Tarjetas de producto con hover, imagen, título, precio
order-card.css (~100 líneas)
Tarjetas de orden (Eskaera) con metadatos, badges
cart.css (~150 líneas)
Carrito lateral, items, total, botones save/reload
buttons.css (~80 líneas)
Botones primarios, checkout, acciones
quantity-control.css (~100 líneas)
Control de cantidad (spinners + input numérico)
forms.css (~70 líneas)
Inputs, selects, checkboxes, labels
alerts.css (~50 líneas)
Alertas, notificaciones, toasts

sections/ - Layouts Específicos de Página

products-grid.css (~25 líneas)
Grid de productos con responsive
order-list.css (~40 líneas)
Lista de órdenes (Eskaera page)
checkout.css (~100 líneas)
Tabla de checkout, totales, summary
info-cards.css (~50 líneas)
Tarjetas de información, metadatos

🚀 Cómo Usar la Arquitectura

Agregar Nuevas Variables Globales

/* base/variables.css */
:root {
    --my-new-color: #abc123;
}

Crear un Nuevo Componente

Crear archivo: components/my-component.css
Escribir estilos del componente (aislado)
Agregar import en website_sale.css:

@import 'components/my-component.css';

Modificar Estilos Responsivos

Todos los media queries están en layout/responsive.css
No hay media queries esparcidos en otros archivos
Fácil ver todos los breakpoints en un solo lugar

Encontrar Estilos de Elemento

Tarjeta de producto → components/product-card.css
Carrito → components/cart.css
Página eskaera → sections/order-list.css
Colores → base/variables.css

📌 Convenciones

Nomenclatura de Archivos

base/ → Fundamentos (variables, utilidades)
layout/ → Estructura global (páginas, headers, responsive)
components/ → Elementos reutilizables (tarjetas, botones)
sections/ → Layouts específicos de página (checkout, lista)

Orden de @import en website_sale.css

Base & Variables (colores, espacios) - Otras se construyen sobre esto
Layout & Pages (fondos, contenedores) - Base estructural
Components (elementos) - Usan variables de base
Sections (páginas) - Componen con componentes
Responsive (media queries) - Ajusta todo lo anterior

Reglas CSS

✅ Usar --variables definidas en base/variables.css
✅ Mantener componentes aislados (no afecten otros)
✅ Media queries solo en layout/responsive.css
✅ Comentarios de sección con /* ========== ... ========== */
❌ No hardcodear colores (usar variables)
❌ No mezclar lógica de múltiples componentes en un archivo

🔧 Optimizaciones Futuras

Consolidación de Duplicados

Algunos estilos aparecen múltiples veces (ej: .card-text):

Revisar components/product-card.css y components/order-card.css
Extraer a archivo components/card-base.css si es necesario

Mejora de Especificidad

Revisar selectores con !important
Reducir especificidad donde sea posible
Usar CSS variables en lugar de valores hardcodeados

SCSS/SASS (Futuro)

Si en algún momento migramos a SCSS:

@import 'base/variables';
@import 'base/utilities';
// etc...

Permitiría mejor nesting y variables más poderosas.

📈 Cambios Visuales

✅ NINGUNO - La refactorización es solo organizacional
El CSS compilado genera exactamente el mismo output que antes.

🧪 Verificación de Integridad

Después de la refactorización, verificar:

# 1. El archivo principal existe
ls -lh css/website_sale.css

# 2. Todos los imports existen
grep -r "components/\|sections/\|base/\|layout/" css/website_sale.css

# 3. El CSS compila sin errores
# En el navegador, no debe haber errores en la consola

# 4. Los estilos se aplican correctamente
# Visitar todas las páginas (shop, orden, checkout) y verificar visualmente

📚 Referencias

CSS Architecture Pattern: SMACSS (Scalable and Modular Architecture for CSS)
BEM (Block Element Modifier): Para nombrado de clases
Mobile-First Responsive: Breakpoints en layout/responsive.css

✅ Checklist de Refactorización

Crear estructura de carpetas (base, layout, components, sections)
Extraer variables a base/variables.css
Separar utilidades a base/utilities.css
Crear layout/pages.css y layout/header.css
Crear componentes en components/
Crear secciones en sections/
Centralizar responsive en layout/responsive.css
Crear website_sale.css como index
Verificar que no haya reglas duplicadas
Documentar en README.md

Mantenido por: Equipo de Frontend
Última actualización: 7 de febrero de 2026
Licencia: AGPL-3.0

7.8 KiB Raw Blame History