search

css3-alt5.1.5 Estrutura de Arquivos Organizada

hashtag
🗂️ 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.

hashtag
✅ 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.).

hashtag
📁 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

hashtag
💡 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.

Anterior5.1.4 Formas de Aplicar CSSPróximo5.2.1 Formatação de Texto e Espaçamento

Atualizado