frontend-conventionslisted

# Frontend Conventions Tres reglas que se sostienen juntas: un componente vive en un archivo, las clases siguen una nomenclatura predecible, y el JavaScript nunca depende de la sintaxis del motor de templates del backend. ## Regla 1 — Atomicidad de archivo por componente Cada componente de UI tiene su propio archivo CSS y, si necesita interactividad, su propio archivo JS. Nunca mezclado en un archivo monolítico de estilos o de scripts. ``` static/ ├── css/ │ ├── globales/ # reset, colores, base, helpers — compartido por todo el sitio │ ├── componentes/ # un archivo por componente (modal.css, tabla.css, etc.) │ ├── vendor/ # librerías externas, sin modificar │ └── styles.css # índice — ver Regla 2 ├── js/ │ ├── globales/ # utilidades compartidas │ ├── componentes/ # un archivo por componente │ └── vendor/ # librerías externas ``` **Librerías externas siempre en `vendor/`** — nunca cargadas desde un CDN en producción. Esto evita requests externos y garantiza que la app funcione sin depender de disponibilidad de terceros. ## Regla 2 — styles.css como único índice `styles.css` no contiene reglas propias — es exclusivamente una cadena de `@import` que define el orden de carga. ```css @import url('globales/colores.css'); @import url('globales/reset.css'); @import url('globales/helpers.css'); @import url('globales/base.css'); @import url('componentes/modal.css'); @import url('componentes/tabla.css'); /* un @import