Durante a codificação do CSS para um site, é interessante que o designer/programador utilize algumas convenções para que o código fique organizado e bem documentado.
Nos casos em que um projeto é compartilhado entre vários designers e programadores, a definição destas convenções é especialmente necessária para manter o código consistente e inteligível a todos que necessitam trabalhar ou dar manutenção no CSS.
Neste artigo compartilho algumas estratégias simples que aprendi ao longo dos anos e que auxiliam a melhor organizar folhas de estilo.
1º Utilize a declaração abreviada das propriedades
A forma abreviada de propriedades CSS poupa linhas de código e resume as sequências de declarações, deixando o código mais limpo e fácil de entender.
Veja o exemplo de uma classe sem o uso de declarações abreviadas:
Utilizando as declarações abreviadas, teríamos a seguinte definição para a mesma classe:
2º Utilize identação para elementos encadeados
Na utilização de seletores contextuais que fazem uso de herança, também chamados de seletores encadeados (saiba mais aqui), uma opção interessante é a identação dos níveis de encadeamento para melhor visualizar qual a relação entre determinadas classes e elementos.
Exemplo:
Neste exemplo, temos a definição de estilo para o elemento h3. Abaixo, o elemento a que estiver dentro da tag h3, receberá a cor preta. Note que, com a identação, é possível compreender melhor que o estilo dos seletores encadeados está relacionada com o seletor h3.
Entretanto, esta técnica pode se tornar contraproducente caso haja muitos níveis de encadeamento, por exemplo:
Portanto, sugiro utilizar apenar o primeiro nível de identação para relacionar com o contexto do primeiro elemento, caso opte por esta técnica.
3º Faça uma divisão lógica do seu CSS
Organize o estilo em determinadas seções, para facilitar a criação e a manutenção dos estilos e marque estas divisões com comentários CSS.
Uma sugestão de seções para realizar esta divisão:
- Global (reset, corpo da pagina, estilo padrão para parágrafos, listas, etc.)
- Cabeçalho da página
- Estrutura da página
- Rodapé
- Estilos de títulos
- Estilos de texto
- Navegação
- Formulários
- Extras ou Miscelâneas
Os estilos de título e estilos de texto diferem dos estilos globais pois contém também definições de classes, enquanto que os estilos globais tratam apenas de definição para os seletores de tags.
Exemplos de comentários CSS que você pode utilizar para marcar a divisão de seções:
O terceiro exemplo é do CSSDoc, um projeto que visa estabelecer um padrão para documentação de CSS utilizando comentários, mas isso é assunto para outro artigo.
4º Estabeleça padrões de nomenclaturas para classes e IDs
O nome de uma classe ou um ID deve possibilitar a identificação de sua finalidade, de seu uso e de sua semântica.
Deve-se evitar nomear classes e IDs indicando aspectos estéticos e de posicionamento. Imagine as seguintes situações:
- Você nomeia uma classe como conteudoEsquerda, e depois precisa mudar o posicionamento para a direita durante um redesign. Será mais custoso, pois terá que mudar o nome da classe e a intenção não é essa. Se a classe tivesse sido definida como conteudoRelacionado ou sidebar, a mudança ficaria a cargo apenas do CSS;
- Você nomeia uma classe como tituloVerde. Depois, precisa fazer uma manutenção rápida, pois o cliente quer o título em vermelho. Você muda apenas no CSS e a classe perde toda a semântica.
É importante definir também qual a forma de escrever as classes e IDs. Por exemplo: você utiliza camelCase, outro designer utiliza nome-com-hífen e outro utiliza nome_com_underline. Estabeleça um único padrão junto a equipe, para que as nomenclaturas permaneçam consistentes. Pode ser, por exemplo, com hífen para classe e camel case para ID.
5º Especialize classes ao invés de criar seletores semelhantes
No (X)HTML, podemos utilizar mais de uma classe para o mesmo elemento. Com isso podemos especializar os elementos de utilizam uma determinada classe. Esta técnica é útil quando precisa-se aplicar apenas alguma propriedade diferente a um elemento que já utiliza uma classe, evitando a duplicação de estilos ou utilização de estilo inline.
No exemplo abaixo, temos dois parágrafos com a mesma classe, verMais e o CSS correspondente.
HTML
CSS
Porém, para o Segundo parágrafo, não queremos que ele tenha o border-top. Para isso, utilizamos uma segunda classe, chamada “semBorda”, ficando dessa forma:
HTML
CSS
Dessa forma, especializamos os elementos com a classe verMais, combinando mais uma classe que modifica apenas uma das propriedades, ao invés de criar uma classe verMais2 com as mesmas definições, retirando apenas a borda.
6º Ordene as propriedades dos seletores
Independente se você utiliza uma propriedade por linhas ou todas as propriedades CSS em uma única linha, escolher uma ordem para as propriedades é importante para facilitar a identificação, a adição de novas propriedades e também ajuda e encontrar mais rápido uma propriedade que você precisa alterar.
Longe de ser pragmática e indicar apenas 1 técnica com a qual tive contato (e que muitas pessoas às vezes têm dificuldade de se adaptar), sugiro duas formas de realizar essa ordenação:
Por ordem alfabética
No começo é um pouco mais complicado para conseguir localizar determinadas propriedades, pois acaba quebrando um pouco a organização lógica. Por exemplo, neste método propriedades como width e height ficarão amplamente distanciadas se o seletor contiver margin, padding, text-align, text-transform, entre outros. Porém, é um padrão mais conciso e que não gera ambiguidades de utilização.
Por agrupamento lógico
Este método pode ser mais produtivo, mas deve ser muito bem definido e documentado como será o agrupamento e qual será a ordem que estes agrupamentos aparecerão nos seletores. Além disso, deve-se ter certeza de que todas as propriedades foram devidamente mapeadas e agrupadas, para não se surpreender com uma propriedade “esquecida” e depois não conseguir saber onde irá colocá-la no seletor.
Um exemplo de agrupamento lógico:
Com técnicas simples como esta é possível tornar o CSS mais funcional, semântico e compreensível, mantendo, principalmente, a flexibilidade do código.