📌 Distribuição ideal das regras CSS por arquivo

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