Un proyecto mal organizado funciona al principio.
Uno bien organizado funciona siempre.

La diferencia aparece cuando:

• Tienes que volver a tocar ese código dentro de 3 meses
• Entra otra persona al proyecto
• O el proyecto empieza a crecer

Ahí es donde una buena estructura te salva la vida.

---

Primero: ¿por qué importa tanto el orden?

Organizar carpetas no es por obsesión ni por estética. Es por estas cuatro razones:

• Encuentras archivos rápido
• Evitas repetir código
• Cambias cosas sin miedo
• Puedes escalar sin que el proyecto se vuelva un caos

Un proyecto frontend no es solo HTML y CSS.
Es interfaz + lógica + assets + estructura mental.

Y si tu estructura es mala, tu cabeza también sufre.

---

La regla número uno

Cada cosa debe tener un solo lugar lógico..

Si una imagen puede estar en tres carpetas distintas… ya hay un problema.

Si un botón tiene su CSS en cuatro archivos… peor.

Todo lo que haces debe responder a:
¿Dónde buscaría esto dentro de 2 meses?

---

Una estructura simple que casi siempre funciona

Para proyectos frontend clásicos (HTML + CSS + JS):

/assets
    /img
    /icons
    /fonts

/styles
    base.css
    layout.css
    components.css
    pages.css

/scripts
    main.js
    utils.js

/pages
    about.html
    blog.html
    projects.html

index.html

¿Por qué así?

/assets: Todo lo pesado y visual. Nada de imágenes sueltas por ahí.

/styles: El CSS separado por intención:

• base.css → variables, reset, tipografías
• layout.css → grids, secciones, contenedores
• components.css → botones, cards, navbar
• pages.css → cosas específicas de una página

Así no tienes un styles.css de 4.000 líneas.

/scripts: Nada de meter todo en main.js.

• main.js inicializa
• utils.js ayuda
• módulos viven aparte

/pages: Cuando tu sitio ya no es una sola página.

---

Cuando tu UI empieza a repetirse

Si usas navbar, cards, footers, modales, etc…
eso ya son componentes, aunque no estés en React.

 
/components
    navbar.html
    footer.html
    blog-card.html
  

Esto te permite:

• Reusar
• Cambiar una sola cosa y que afecte a todo
• Migrar fácil a Astro, React, etc después

---

Cómo organizo JavaScript cuando el proyecto crece

Cuando tu frontend deja de ser una landing:

 
/scripts
    main.js
    utils.js
    blog/
        filter.js
        search.js
        loadMore.js
    ui/
        modal.js
        theme.js
        navbar.js

Esto hace que:

• Cada feature viva en su espacio
• El código sea más legible
• Los bugs sean más fáciles de encontrar

Un archivo gigante es un cementerio de bugs.

---

Cómo NO nombrar archivos

final.css  
nuevo.js  
prueba2.js  
cosas.js  
backup_v3.js
        

Eso es como tener carpetas llamadas:

“varios”, “cosas”, “otros”

Nadie sabe qué hay ahí. Ni tú en un mes.

Nombra según qué hace, no según cuándo lo hiciste.

---

Mi regla favorita

Lo que se repite va a components o modules.
Lo que es específico de una página va a pages.

Esa regla sola te evita el 80% del desorden.

---

La verdadera razón por la que esto importa

El orden no es para el computador.
Es para tu cerebro del futuro.

Cuando vuelvas a este proyecto:

• sabrás dónde está todo
• no te dará pereza tocarlo
• no romperás cosas sin querer

Y eso, en el mundo real, vale oro.