addons-cm/website_sale_aplicoop/static/src/css

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

1. Crear archivo: components/my-component.css
2. Escribir estilos del componente (aislado)
3. 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

1. Base & Variables (colores, espacios) - Otras se construyen sobre esto
2. Layout & Pages (fondos, contenedores) - Base estructural
3. Components (elementos) - Usan variables de base
4. Sections (páginas) - Componen con componentes
5. 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