Yay! Você fez um curso e fez projetos para ser um bom desenvolvedor web!

Mas, como tudo na vida, foi percebendo que quando os projetos foram ficando maiores, o seu código HTML e (principalmente) CSS padrões começaram a ficar muito grandes, difíceis de entender e de se organizar.

Na verdade, esse é um problema que já foi passado por diversas pessoas! Assim, elas pensaram em soluções muito abrangentes de tornar a vida de um programador CSS mais fácil!

A seguir, há 3 maneiras de você avançar o seu desenvolvimento em CSS baseado em ferramentas, regras e estruturas criadas pela comunidade.

1 – Adote um padrão de nomenclatura

Nomear as coisas é difícil. Porém, utilizar boas práticas de nomenclatura de elementos e estilos em CSS tornará seu código mais fácil de ler e manter.

Assim, padrões de nomenclatura são uma série de estruturas que você pode adotar agora mesmo para tornar a sua vida no futuro muito melhor! Uma das mais conhecidas no mundo de CSS é a BEM (Bloco, Elemento e Modificador).

A convenção BEM de nomenclatura

Esse padrão coloca uma série de estruturas novas (e ousadas) para o seu código, sendo necessário apenas o uso de classes!

Para usá-lo, primeiro é necessário dividir tudo no site em Blocos. A barra de menu de um site é um bloco, o footer do site é outro, o header é outro e por assim vai. O nome do bloco você escreve normalmente:

.header

Dentro destes blocos, existem Elementos. Por exemplo, dentro do header do seu site, elementos que podem haver são banners, textos, botões e imagens. Em BEM, a classe do banner dentro do bloco header é nomeada usando dois sublinhados:

.header__banner

Por último, podem haver Modificadores para blocos e elementos no seu projeto. Você pode estilizar um header inteiro, mas agora quer uma versão azul dele para usar em outro lugar! Para isso, basta adicionar dois hífens e descrevê-lo:

.header__banner–azul

Assim, basta começar a dividir as estilizações do site em blocos, elementos e modificadores para que fique muito mais fácil de manter o seu projeto!

2 – Programe em um Pré-processador de CSS

Pré-processadores de CSS são verdadeiras ferramentas de linguagens de programação que são depois convertidas (compiladas ou interpretadas) para CSS. Suas comunidades criadoras realmente adicionaram muitos recursos novos para CSS: desde variáveis e funções, até Scripts completos com IF, Else, While, For…

Os benefícios do padrão de nomenclatura são adicionados através do recurso de nesting (aninhamento), podendo diretamente e visualmente criar a hierarquia entre blocos, elementos e modificadores sem precisar reescrever seus nomes.

Veja a seguir um código feito com o pré-processador Sass:

Nele, fica muito fácil ver que .banner está dentro de .header, e que o modificador .azul está dentro de .banner, tornando muito mais simples o processo de organização dos seus estilos.

Se quiser saber mais sobre pré-processadores, você pode ir agora para o curso de Sass e aprender na prática como tirar o maior proveito nos seus projetos!

3 – Instale um Linter

Mesmo querendo manter um padrão na maneira que está programando estilos, seja em CSS padrão ou usando um pré-processador, você irá cometer erros. Estes podem variar desde verdadeiros bugs, até estilos de programação que estão inconsistentes e bagunçados.

Para te impedir de cometer esses erros, foram criados linters para todas as linguagens, inclusive para CSS! Eles são máquinas de correção, sempre dando uma olhada no seu código para ver se está tudo seguindo corretamente.

O que vou te recomendar aqui é o StyleLint, que possui extensão para diversas IDE’s (como o Visual Studio Code).

A melhor maneira de entender como um linter funciona é vê-lo em prática, corrigindo seus erros de sintaxe e empregando as melhores práticas de programação para que seu código fique lindo e organizado.

Conclusão

Rapidamente, programar em CSS pode se tornar um mundo de bagunça e confusão. Mas felizmente, durante anos, a comunidade tem criado excelentes ferramentas para tornar a vida do programador mais fácil.

Deixe nos comentários quais técnicas você já usa e quais está pensando em começar a aplicar!