Dicas e Boas Práticas – CSS

Separe sempre suas classes CSS por conteúdo ao qual ela está referenciando.

Você pode fazer isto de várias formas contanto que fique intuitivo para você e para seus colegas de trabalho. As minhas recomendações são as seguintes:

1. Coloque seus estilos CSS em um diretório devidamente organizado dentro do seu projeto.
2. Divida-as em arquivos por contexto. Por exemplo, tenha um arquivo para todas as classes referentes a formatações de cores de fundos, outro para formatações de texto, outro para imagens e tantos outros quantos julgar necessário, mas claro sem exageros.
3. Dentro de cada arquivo defina nomes intuitivos e que possam identificar tanto o que a classe faz quanto em qual arquivo aquela classe está localizada, isso facilita na hora de realizar manutenções. Alguns exemplos de nome seriam:
• .fundo-cor-principal{} – referenciando todos os componentes que devem ter como cor de preenchimento a cor definida como principal.
• .text-titulo{} – referenciando a todos os textos referentes a títulos de conteúdo da sua página.
• .img-largura-100-porcento{} – referenciando a todas as imagens que devem ocupar 100% da largura de seu componente pai.
4. Utilize sempre letras minúsculas, ou algum outro padrão de capitalização que você esteja habituado a utilizar para definir os nomes das classes, desta forma você não precisa quebrar a cabeça ou verificar os arquivos todas as vezes que precisar utilizar uma classe.

Nestas horas fala sempre mais alto o bom senso, pois exageros e minimalismos normalmente são desnecessários e podem reduzir sua qualidade.

Um abraço a todos e obrigado pela atenção!!