Então, você está começando com o CSS e está tendo dificuldades para mantê-lo organizado. Bem, CSS tem um método de organização inerente que está certo no nome: The Cascade. Tudo o que você escrever primeiro afetará tudo o que vier depois; e tudo pode ser substituído quando necessário.
A Cascade é tão importante quanto antes e ainda é incrivelmente poderosa. Porém os sites ficaram mais complicados. Os desenvolvedores front-end costumam escrever milhares de linhas de CSS para um projeto individual. Manter todo esse código organizado pode se tornar uma tarefa tão monumental, que os desenvolvedores criaram sistemas inteiros e até aplicativos dedicados a organizar tudo isso.
Quaisquer ferramentas que você use, você precisa de algo. Escrever apenas uma folha de estilo grande e antiga funcionará muito bem para o seu portfólio de uma página, ou talvez até para um site de brochura de cinco páginas. É improvável que funcione para algo mais complexo.
1. USE UM PRÉ-PROCESSADOR DE CSS
Quase todos os guias para organizar seu CSS começam aqui e por um bom motivo: ele permite que você coloque tudo em uma folha de estilo grande e antiga. Sim, eu sei o que acabei de dizer acima; me ouça. Quanto mais arquivos CSS você vincular em seu HTML, mais solicitações HTTP o seu navegador faz. Isso atrasa as coisas um pouco. No mínimo, é mais trabalho para o processador.
Com um pré-processador, você pode separar seu CSS em quantos arquivos e pastas diferentes precisar e compilar todos eles em um arquivo para o navegador quando você salvar. É o melhor dos dois mundos. Eu recomendaria iniciar um projeto de teste com o Sass (atualmente o pré-processador CSS mais popular) para ter uma ideia de como ele funciona.
2. ARQUIVOS CSS PARA PÁGINAS INDIVIDUAIS
Veja uma dica para sites menores: tenha um arquivo CSS separado para cada página. Isso é especialmente útil nos sites em que cada página tem um layout diferente. O simples fato de você não precisar rolar pelo CSS para outras páginas ao procurar pelo CSS que você deseja é um grande aumento de produtividade. Trabalhando na “Página Sobre”? Basta abrir o about-page.css e ir embora.
3. ARQUIVOS CSS PARA COMPONENTES COMPLEXOS E REPETIDORES
Agora, isso funciona da mesma forma para sites menores e maiores: se você tem algo complexo - como uma apresentação de slides sofisticada na home page -, crie seu próprio arquivo CSS. Não o coloque no mesmo arquivo CSS da sua home page. O mesmo vale para qualquer elemento que você possa usar em mais de uma página: o cabeçalho, a navegação, o rodapé, uma galeria de imagens ou o que você tem.
Não se trata apenas de organizar seu código. Se você mantiver o código desses elementos separado e independente de qualquer estilo específico de página, será mais fácil reutilizá-los.
5. EVITAR CLASS-ITIS
O que é class-itis? É usar o atributo class = como o atributo style =. É basicamente reproduzindo a maneira como costumávamos fazer as coisas nos dias de layouts de mesa. Seu código parece um pouco com isso:
<div class = "red-bg cantos-arredondados-5px colunas-3 altura-flexível helpme icantgoonlikethis"> [Insira o conteúdo aqui] </ div>
E isso pode ser transmitida por alguns dos frameworks CSS maiores e até mesmo por algumas metodologias CSS (que é uma das razões pelas quais eu não as estou abordando). Não importa qual atributo você esteja usando, se você está escrevendo seus estilos nos arquivos HTML, está errado. É inatingível, especialmente à medida que os sites aumentam.