Estou desenvolvendo meu site de portfólio. Linha vai, linha vem; organização e estruturação pra lá e pra cá; leituras e pesquisas de boas práticas constantemente. Eu me perguntei: por que não falar da dificuldade que é, para um dev iniciante, organizar as pastas e arquivos de forma eficaz e dentro dos parâmetros das boas práticas?
Então pensei: "Ok Tayne, você precisa falar sobre isso!". E agora estou aqui escrevendo isso!
Bora lá, a primeira coisa que vou pontuar sobre isso, senão a mais importante, é: Tenha em mente a importância de organizar seus arquivos e pastas. Independentemente se você quer trabalhar sozinho (freelancer), ser frontend, backend ou fullstack, a organização do seu projeto reflete como você enxerga e organiza sua própria vida. Se sua mente é desorganizada, sua vida acaba sendo desorganizada. Consequentemente, seu código e seus projetos também serão desorganizados. Provavelmente, se você não se atentar a isso agora, quando precisar fazer algo mais complexo, você mesmo vai se perder em algo que criou.
Vou usar essa estrutura como exemplo:
Projeto
├─ src
│ ├─ fontes
│ │ ├─ SFbold.ttf
│ │ ├─ SFmedium.ttf
│ │ └─ SFregular.ttf
│ ├─ medias
│ │ ├─ icons
│ │ ├─ images
│ │ └─ logo
│ ├─ pages
│ └─ styles
│ ├─ animations.css
│ ├─ base.css
│ ├─ components.css
│ ├─ layout.css
│ └─ reset.css
├─ index.html
└─ script.js
Temos cinco arquivos CSS na estrutura deste projeto: animations.css, base.css, components.css, layout.css e reset.css. Sabemos que, independentemente do arquivo em que decidirmos colocar o estilo, ele será aplicado. No entanto, se você criar um único CSS para estilizar toda a sua página, além de grande, ficará confuso. Separar e hierarquizar os estilos faz você ganhar tempo ao decidir fazer uma mudança posterior, e você não vai precisar ficar rolando uma infinita linha de código para fazer algum ajuste.
‼️Vamos às distribuições:
1️⃣ Reset global (reset.css)
- Define estilos base para remover estilos padrão dos navegadores.
- Exemplo:
margin: 0; padding: 0; box-sizing: border-box;
2️⃣ Estilos globais (base.css)
- Define estilos básicos aplicáveis ao site inteiro.
- O que colocar?
- Fonte padrão (
font-family) - Cores globais
- Configuração de
body, html - Scroll behavior (
scroll-behavior: smooth;)
Exemplo:
html, body {
font-family: "SFregular", sans-serif;
background-color: #f8f8f8;
color: #404247;
scroll-behavior: smooth;
}
3️⃣ Layout principal (layout.css)
- Controla estrutura e posicionamento dos elementos principais.
- O que colocar?
.interface (configuração da página)<header> e <main> (estrutura principal)<section> (seções da página)
Exemplo:
.interface {
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
4️⃣ Componentes (components.css)
- Estilos específicos de elementos reutilizáveis.
- O que colocar?
.nav-fixed (menu fixo).language-button button (botões de linguagem)- Outros elementos interativos
Exemplo:
.nav-fixed {
position: fixed;
top: 0;
width: 100%;
background: none;
z-index: 1000;
display: flex;
justify-content: space-between;
padding: 0;
}
.language-button button {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
margin-right: 10px;
color: #404247;
}
5️⃣ Animações (animations.css)
- O que colocar?
- Transições (
hover, active) - Efeitos de entrada (
fade-in, slide) - Animações CSS (
@keyframes)
Exemplo:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.section-title {
animation: fadeIn 1s ease-in-out;
}
📂 Resumo: onde colocar cada configuração:
🔥 Benefícios dessa organização
✅ Facilidade de manutenção (cada CSS tem sua função bem definida).
✅ Escalabilidade (se precisar adicionar algo, já sabe onde colocar).
✅ Melhor performance (navegadores carregam CSS de forma eficiente).
👏👏👏