Padrões de escrita CSS

Para manter a qualidade do código e uma padronização na escrita css dos projetos da Eagle Tecnologia, elaboramos um guia com todas as recomendações necessárias. As recomendações valem tanto para a escrita CSS como também para pré-processadores como SASS e Less.

Essas recomendações não são uma regra universal, mas sim sugestões que se seguidas e adaptadas podem aumentar a produtividade da equipe.

Nomenclatura de Classes e IDs

Ambas as nomenclaturas devem ter um nome sugestivo para identificar de forma mais clara o que o elemento irá estilizar. Todos os nomes deverão ser escritos em inglês.

/* correto */
.title-main-page 
/* errado */
.titulo1
.titulo_pageina_inicial

Para a escrita de classes será utilizado o hífen(-) para separar espaços entre os nomes, já os ids serão escritos no formato camelCase.

/* classe */
.this-is-class 
/* id */
#thisIsId

Consideração sobre seletores

Alguns detalhes podem fazer toda a diferença na qualidade e legibilidade do código.

• Seletores por atributo devem usar aspas duplas amarrando o seu valor.
• Evite seletores sobre-qualificados, por exemplo, div.container podemos utilizar apenas .container.

Estrutura

Uma estrutura limpa e legível é muito importante em um projeto com grandes equipes. Siga as seguintes recomendações:

• Para indentar use tabs, não use espaços;
• Adicione duas linhas em branco para separar seções e uma linha para separar blocos da mesma seção;
• Caso aplique mais de uma regra para um seletor, colocar um em cada linha. Veja o exemplo:

Propriedades

A escrita correta das propriedades deixará o código muito mais fácil de ler.

• Propriedades devem ser seguidas de uma coluna e um espaço;
• Todas propriedades devem estar em caixa-baixa, exceto para nomes de Font específicas;
• Usar código hexadecimal para cores, ou utilizar rgba() somente quando necessitar de utilizar opacidade;
• Evitar de utilizar a propriedade rgb em letras maiúsculas;
• Quando possível encurtar os valores hexadecimais: #fff ao invés de #FFFFFF.

Ordenação de Propriedades

A ordenação aleatória não é uma prática recomendada pois dificulta a leitura do código e dá impressão de desorganização. O padrão que a Eagle adota é a ordenação por categoria no qual é baseada respectivamente pelas categorias:

• Display
• Posicionamento
• Box model
• Cores e tipografias
• Outros

Vendor Prefixes

São os prefixos para engine de cada browser, por exemplo,-webkit. A ordenação é feita dos prefixos mais longos para os mais curtos. Valores devem ser alinhados a esquerda após os dois pontos. Os valores alinhados com tab como se fosse uma única coluna.

Para os gradient backgrounds é utilizado o seguinte padrão:

Valores

Seguindo as guidelines abaixo podemos manter um alto grau de consistência em nosso arquivo CSS.

• Espaço antes do valor e depois dos dois pontos;
• Sempre terminar com ponto e vírgula;
• Usar aspas duplas ao invés de aspas simples;
• Valor 0 não deve ter unidade(exemplo: 0%, 0px, 0em…);
• Use o zero a esquerda para valores decimais, exemplo, evite usar valores como .5 o ideal é 0.5.
• Em Múltiplos valores separados por vírgula, cada valor deve ser separado por vírgula ou uma nova linha.

Media Queries

Os media queries configuram os estilos para diversos tamanhos de tela. Eles são implementados na parte inferior de todo o código CSS. A regra para o media queries devem ser indentadas em somente um nível:

Comentários

Para comentar os códigos CSS é utilizado 2 padrões. O primeiro padrão irá comentar sessões e subseções, ou seja, grupo de seletores que estilizam um mesmo componente, módulo, extensão, etc. Para cada comentário de sessão ou subseção, deverá utilizar índices numéricos: 1.0, 1.1, 2.0, ect. Após cada comentário de sessão deverá conter uma linha em branco e antes e depois dos caracteres /* */ deverá conter um espaço.

O segundo padrão é referente aos comentários de linha:

• Esses comentários são sempre em cima do seletor e/ou propriedade;
• Não Incluir linha em branco antes ou depois do comentário se o seletor pertencer a mesma sessão;
• Comentários de linha muito extensos é utilizado quebras de linha.

Considerações para escrita SASS/Less

Para escrita de pré-processadores é seguido algumas regras para manter a legibilidade e qualidade do código. Os padrões definidos para a escrita CSS também são válidos para a escrita SASS/Less.

Aninhamento

Evite aninhar seletores só porque você pode fazer isso, não significa que você deve fazê-lo sempre. Considere aninhar se você tem um escopo de estilos para um pai e se há múltiplos elementos para serem aninhados.

Tenha em mente de manter um limite de no máximo três aninhamentos. Isso facilita a leitura e entendimento do código futuramente. Para escrita SASS é utilizado o estilo SCSS que contém {} e ;.

Conclusão

Independente do fato de escrever usando o CSS puro ou um pré-processador, o importante é manter um padrão que ajudará tanto na manutenção do código como no entendimento do mesmo.

Todos nós desenvolvedores sabemos que o código pode crescer e ficar insuportável mantê-lo, porém se temos em mente manter uma legibilidade do código desde o início, com certeza evitará dores de cabeça no futuro para quem está envolvido no projeto como também para novos membros da equipe.

E ai dev o que achou desse guia, tem algo a incrementar ou retirar, como você trabalha no dia-a-dia, compartilhe com a gente nos comentários.