From 23a5ae7665550cc2add7b0634fa120c33d2c3b89 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Sat, 8 Nov 2025 16:38:42 -0600 Subject: [PATCH] =?UTF-8?q?ARQUITECTURA:=20Separaci=C3=B3n=20de=20responsa?= =?UTF-8?q?bilidades=20CSS=20-=20Eliminar=20duplicaciones?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problema: Tres archivos CSS definían body con responsabilidades mezcladas: - fonts.css línea 38: body { font-family, color, antialiasing... } - style.css línea 95: body { font-family, margin, padding... } - variables.css línea 189: body { font-family, color, line-height... } Causaba conflictos de cascada y violaba principio de responsabilidad única. Solución: 1. fonts.css - SOLO fuentes: - Mantener: :root con variables tipográficas - Mantener: @font-face declarations (comentadas) - Mantener: Clases utilitarias de fuentes - ELIMINAR: body, code, pre (movidos a style.css) - Agregar: Comentarios de responsabilidades 2. variables.css - SOLO variables: - Mantener: :root con todas las variables CSS - ELIMINAR: body, a, a:hover (movidos a style.css) - Agregar: Comentarios de responsabilidades 3. style.css - Estilos aplicados: - Mantener: body (único lugar correcto) - Agregar: a, a:hover (desde variables.css) - Agregar: code, pre, kbd, samp (desde fonts.css) - Agregar: font-smoothing a body - Agregar: Comentarios de responsabilidades Principio de Separación: - fonts.css: DEFINE fuentes (variables y @font-face) - variables.css: DEFINE variables (colores, espaciados, etc.) - style.css: APLICA variables a elementos HTML Versión: 1.0.4 → 1.0.5 (cache busting) Archivos modificados: - wp-content/themes/apus-theme/assets/css/fonts.css - wp-content/themes/apus-theme/assets/css/variables.css - wp-content/themes/apus-theme/assets/css/style.css - wp-content/themes/apus-theme/inc/enqueue-scripts.php - wp-content/themes/apus-theme/functions.php Issue #121 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../themes/apus-theme/assets/css/fonts.css | 33 +++++---------- .../themes/apus-theme/assets/css/style.css | 41 ++++++++++++++++++ .../apus-theme/assets/css/variables.css | 42 +++++++++---------- wp-content/themes/apus-theme/functions.php | 2 +- .../themes/apus-theme/inc/enqueue-scripts.php | 2 +- 5 files changed, 73 insertions(+), 47 deletions(-) diff --git a/wp-content/themes/apus-theme/assets/css/fonts.css b/wp-content/themes/apus-theme/assets/css/fonts.css index 43e0c43a..9bad6eeb 100644 --- a/wp-content/themes/apus-theme/assets/css/fonts.css +++ b/wp-content/themes/apus-theme/assets/css/fonts.css @@ -1,10 +1,15 @@ /** * Sistema de Tipografías - APUS Theme * - * Por defecto usa SYSTEM FONTS para máximo rendimiento y Core Web Vitals. - * Poppins es opcional y se carga solo si se activa en el Customizer. + * RESPONSABILIDAD: SOLO definición de fuentes y variables tipográficas + * - Declaraciones @font-face (comentadas - usar Google Fonts) + * - Variables CSS de tipografía (:root) + * - Clases utilitarias de fuentes * - * Basado en especificaciones del template del cliente. + * NO debe contener: + * - Estilos de body (van en style.css) + * - Estilos de elementos HTML (van en style.css) + * - Variables de colores o espaciados (van en variables.css) * * @package Apus_Theme * @since 1.0.0 @@ -34,27 +39,11 @@ --line-height-base: 1.6; } -/* Aplicar fuente del sistema por defecto */ -body { - font-family: var(--font-primary); - font-size: var(--font-size-base); - line-height: var(--line-height-base); - color: #333; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* ELIMINADO: Estilos globales h1-h6 - Template usa SOLO Bootstrap defaults - * Estos estilos sobrescribían Bootstrap con font-weight: 600 incorrecto - * Template requiere Bootstrap h6 default: font-weight: 500 +/* ELIMINADO: body, code, pre (movidos a style.css) + * Este archivo SOLO debe contener variables y @font-face + * Los estilos de elementos HTML van en style.css */ -/* Código y preformateado */ -code, pre, kbd, samp { - font-family: var(--font-mono); - font-size: 0.9em; -} - /* ============================================ POPPINS (Opcional - Solo si se activa) ============================================ diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css index 57f525fc..f5808008 100644 --- a/wp-content/themes/apus-theme/assets/css/style.css +++ b/wp-content/themes/apus-theme/assets/css/style.css @@ -1,3 +1,21 @@ +/** + * APUS Theme - Main Stylesheet + * + * RESPONSABILIDAD: Estilos principales del tema + * - Variables CSS específicas del tema (:root en este archivo) + * - Estilos base de elementos HTML (body, a, h1-h6, code, etc.) + * - Layout general + * - Componentes principales + * + * IMPORTANTE: Este es el archivo PRINCIPAL de estilos + * - fonts.css: SOLO variables de fuentes + * - variables.css: SOLO variables de colores/espaciados/etc + * - style.css: Aplica variables a elementos HTML (este archivo) + * + * @package Apus_Theme + * @since 1.0.0 + */ + /* ========================================================================== CSS Variables ========================================================================== */ @@ -92,6 +110,10 @@ html { -moz-osx-font-smoothing: grayscale; } +/* ========================================================================== + Base Styles - Elementos HTML Globales + ========================================================================== */ + body { margin: 0; padding: 0; @@ -100,6 +122,25 @@ body { line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Links globales */ +a { + color: var(--color-blue-light); + transition: color var(--transition-base, 0.3s ease); + text-decoration: none; +} + +a:hover { + color: var(--color-cyan-primary); +} + +/* Código y preformateado */ +code, pre, kbd, samp { + font-family: var(--font-code); + font-size: 0.9em; } /* ========================================================================== diff --git a/wp-content/themes/apus-theme/assets/css/variables.css b/wp-content/themes/apus-theme/assets/css/variables.css index 4a0d3df3..7bab73a0 100644 --- a/wp-content/themes/apus-theme/assets/css/variables.css +++ b/wp-content/themes/apus-theme/assets/css/variables.css @@ -1,9 +1,21 @@ /** * Variables CSS del Template RDash - * Fuente: D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\_planeacion\theme-template\css\style.css * - * NIVEL 1 - BLOQUEANTE - * Estas variables DEBEN existir antes de aplicar cualquier estilo. + * RESPONSABILIDAD: SOLO variables CSS globales + * - Colores (--color-*) + * - Tipografía (--font-*, --line-height-*, --font-weight-*) + * - Espaciados (--spacing-*) + * - Bordes (--border-*) + * - Sombras (--shadow-*) + * - Transiciones (--transition-*) + * - Z-index (--z-*) + * - Gradientes (--gradient-*) + * - Breakpoints (--breakpoint-*) + * + * NO debe contener: + * - Selectores de elementos (body, a, h1, etc. van en style.css) + * - Clases utilitarias (van en utilities.css o style.css) + * - Estilos aplicados (SOLO variables en :root) * * @package Apus_Theme * @since 1.0.0 @@ -182,23 +194,7 @@ --breakpoint-xxl: 1400px; } -/* ======================================== - APLICACIÓN GLOBAL DE VARIABLES - ======================================== */ - -body { - font-family: var(--font-family-base); - color: var(--color-gray-800); - line-height: var(--line-height-base); - font-weight: var(--font-weight-normal); -} - -/* Links globales */ -a { - color: var(--color-blue-light); - transition: color var(--transition-base); -} - -a:hover { - color: var(--color-cyan-primary); -} +/* ELIMINADO: body, a, a:hover (movidos a style.css) + * Este archivo SOLO debe contener :root con variables + * Los estilos de elementos HTML van en style.css + */ diff --git a/wp-content/themes/apus-theme/functions.php b/wp-content/themes/apus-theme/functions.php index 9f0cea49..a0d9b39a 100644 --- a/wp-content/themes/apus-theme/functions.php +++ b/wp-content/themes/apus-theme/functions.php @@ -14,7 +14,7 @@ if (!defined('ABSPATH')) { /** * Theme Version */ -define('APUS_VERSION', '1.0.3'); +define('APUS_VERSION', '1.0.5'); /** * Theme Setup diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php index b17e4fda..e4d85cca 100644 --- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php +++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php @@ -95,7 +95,7 @@ function apus_enqueue_main_stylesheet() { 'apus-main-style', get_template_directory_uri() . '/assets/css/style.css', array('apus-variables'), - '1.0.4', // Fix: Cambiar --font-primary a Poppins (era system-ui) + '1.0.5', // Arquitectura: Separación de responsabilidades CSS 'all' ); }