5.1.5 Estrutura de Arquivos Organizada

🗂️ Estrutura de Arquivos Organizada

Manter uma estrutura de pastas clara e bem definida é essencial para garantir a manutenção, escalabilidade e colaboração em projetos front-end.

Separar arquivos de estilo (CSS), estrutura (HTML) e comportamento (JavaScript) em diretórios distintos segue as boas práticas de desenvolvimento e facilita a componentização do código.

---

✅ Boas Práticas de Organização

• Use um diretório específico como /css/ ou /styles/ para armazenar os arquivos CSS.

• Separe o JavaScript em uma pasta /js/.

• Coloque os arquivos HTML na raiz ou em uma pasta /pages/, se houver mais de um.

• Utilize nomes claros e descritivos para arquivos e pastas.

• Para projetos maiores, considere separar componentes e assets (imagens, fontes, etc.).

---

📁 Exemplo de Estrutura de Pastas

bashCopiarEditarmeu-projeto/
├── index.html
├── /css/
│   └── estilo.css
├── /js/
│   └── script.js
├── /images/
│   └── logo.png
├── /fonts/
│   └── roboto.woff2
├── /components/       ← (opcional para HTML reutilizável ou frameworks)
│   └── navbar.html
└── README.md

---

💡 Dica

Em projetos maiores ou com frameworks como React ou Vue, essa organização pode evoluir para algo mais modular, com pastas como /src/, /components/, /assets/, etc.