Padrões de escrita de CSS

No último sábado dia 23 tivemos o WordCamp São Paulo evento oficial organizado pela comunidade WordPress. Uma das palestras que me chamou atenção foi a do Claudio Sanches, falou sobre padrões de escrita de CSS e dicas sobre desenvolvimento com WordPress, sua palestra teve o nome “Não é porque funcionou que significa que esta certo!”.

Uma das dicas do Claudio Sanches em sua palestra,  foi sobre o HandBook do WordPress documentação gerada pela equipe do Core do WordPress, nela contém dicas sobre codificação de CSS, HTML, JavaScript e PHP. Fiquei muito interessado no assunto e neste post vou traduzir os principais pontos do Handbook sobre CSS.

Lembrando que esses padrões de escrita de CSS são especificados pela equipe do core do WordPress, existem outros padrões de escrita de CSS definidos por outros times, mas muitas regras dessa guideline também podemos aplicar em projetos sem ser WordPress.

Estrutura dos padrões de escrita de CSS do WordPress

Uma estrutura limpa e legível é muito importante em um projeto com grandes equipes:

• 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 uma mais de uma regra para um seletor colocar um em cada linha

exemplo:

/* correto */

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

/* errado */

#selector-1, #selector-2, #selector-3 {
    background: #fff;
    color: #000;
    }

#selector-1 { background: #fff; color: #000; }Code language: CSS (css)

Uso de Seletores com padrões de escrita de CSS WordPress

As recomendações de escrita de CSS são muito importantes para eficiência do seu CSS, mas pode ter resultado inverso no projeto quando mau executado.

• Semelhante ao padrão de codificação do WordPress para nomes dos arquivos use letras minúsculas e palavras separadas por hífens ao nomear seletores.
• Evite camelCase ou sublinhados.
• Use seletores legíveis quem descrevam qual é elemento e qual é o sua aparência.
• Seletores por atributo devem usar aspas duplas amarrando o seu valor.
• Evite seletores sobre-qualificados, por exemplo, “div.container” podemos utilizar apenas “.container”.

Exemplo:

/* correto */

#comment-form {
    margin: 1em 0;
}

input[type="text"] {
    line-height: 1.1;
}

/* Incorrect: */

#commentForm { /* erro: camelCase. */
    margin: 0;
}

#comment_form { /* erro: underline. */
    margin: 0;
}

div#comment_form { /* erro: sobre-qualificação. */
    margin: 0;
}

#c1-xr { /* O que é c1-xr?! esse tipo de seletor não define nada. */
    margin: 0;
}

input[type=text] { /* com atributos devemos trabalhar dessa forma [type="text"] */
    line-height: 110%;
}Code language: CSS (css)

Propriedades

Menos é mais, verifique se você não está repetindo o estilo ou introduzindo dimensões fixas(quando a solução fluida é mais aceitável).

• 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 rga em letras maiúsculas
• Quando possível encurtar os valores hexadecimais: #fff ao invés de #FFFFFF
• Use shorthand(exceto para overriding styles) para background, border, font, list-style, margin e padding.

Ordenação de Propriedades

Ordenação aleatório de propriedades é um caos, isso não é poesia. No Core do WordPress, utiliza dois padrões de escrita de CSS de ordenação: a lógica ou ordenada por categoria. As propriedades dentro de uma categoria são também estrategicamente ordenadas para criar uma transição entre seções, por exemplo, a propriedade “background” escrita antes do “color“.

A ordenação por categorias tem a seguinte base:

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

Exemplo:

#overlay {
    position: absolute;
    z-index: 1;
    padding: 10px;
    background: #fff;
    color: #777;
}Code language: CSS (css)

Vendor Prefixes

São os prefixos para engine de cada browser, por exemplo,“-webkit”. Com os padrões de escrita de CSS do WordPress é recomendado ordenar os prefixos mais longos para os mais curtos. Valores devem ser alinhados a esquerda após os dois pontos os valores alinhas com tab com se fosse uma única coluna

Exemplo

.koop-shiny {
    -webkit-box-shadow: inset 0 0 1px 1px #eee;
    -moz-box-shadow:    inset 0 0 1px 1px #eee;
    box-shadow:         inset 0 0 1px 1px #eee;
    -webkit-transition: border-color 0.1s;
    -moz-transition:    border-color 0.1s;
    -ms-transition:     border-color 0.1s;
    -o-transition:      border-color 0.1s;
    transition:         border-color 0.1s;
}Code language: CSS (css)

Caso especial CSS gradients

.gradient {
    background: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
    background-image: -webkit-linear-gradient(bottom, #fff, #000);
    background-image:    -moz-linear-gradient(bottom, #fff, #000);
    background-image:      -o-linear-gradient(bottom, #fff, #000);
    background-image: linear-gradient(to top, #fff, #000);
}Code language: CSS (css)

Valores

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

• Espaço antes do valor e depois dos dois pontos
• Sempre terminar com ponto e vírgula(claro)
• 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.

Exemplo:

/* Correct: */

.class { /* Uso correto de aspas duplas */
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
}

.class { /* Uso correto de valores com zero */
    font-family: Georgia, serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                       0 1px 0 #fff;
}

/* Incorrect: */

.class { /* Erro: falta de espaço entre os valores */
    background:#fff
}

.class { /* Erro: adicionando unidade para 0 */
    margin: 0px 0px 20px 0px;
}Code language: CSS (css)

Media Queries

Media queries permitem adaptar o nosso DOM a diferentes tamanhos de tela. Não se esqueça de testar todas as regras para ter certeza que este será o esperado. Em geral, é aconselhável manter as media queries agrupadas na parte inferior de seu arquivo css. Uma exceção é feita para p arquivo wp-admin.css no core.

A regras para o media queries devem ser indentadas em um nível:

Exemplo:

@media all and (max-width: 699px) and (min-width: 520px) {

        /* Your selectors */
}Code language: CSS (css)

Comentários

Caso tenha preocupações sobre o tamanho do arquivo, utilize arquivos minificados e constante SCRIPT_DEBUG. Comentários longos devem ser quebrados a partir de 80 caracteres.

Uma tabela de conteúdo deve ser utilizada para stylesheet extensos, especialmente os que são altamente seccionados para isso usamos um índice numérico(1.0, 1.1, 2.0, ect) que auxilia a busca, nesse caso repetimos o número do índice na seção, assim quando o usuário realizar a busca o apontador irá pular para o local correto.

Comentários devem ser formatados tanto quanto PHPDoc é. Cabeçalho de Seções e subseções devem ter novas linhas antes e depois. Comentários inline não devem ter linhas vazias separando o conteúdo de um item para cada relacionado.

Exemplo de seções e subseções:

/**
* #.# Título da seção
*
*  Descrição da seção.
*/

.selector {
    float: left;
}Code language: CSS (css)

Exemplos inline:

/* Este comentário é para esse seletor */

.another-selector {
    position: absolute;
    top: 0 !important; /* Aqui vocês explica porque usou !important */
}Code language: CSS (css)

Considerações finais

• Manter o código bem escrito desde o início, nos ajuda a manter a visão geral, deixando nosso código flexível a mudanças.
• Se você está tentando resolver um problema, esforce para resolver o problema antes de adicionar mais.
• Saiba quando usar a propriedade height. Isto deve ser usado para incluir elementos outside(como images). Caso contrário, use line-height para ter mais flexibilidade.
• Não redefina propriedades default, por exemplo, display:block em elementos blocados.

Referências

• Documentação oficial do WordPress sobre padrões de escrita de CSS:
• Palestra do Claudio Sanches sobre padrões de escrita de CSS

Mais conteúdo relacionado

Gostou do post sobre padrões de escrita de CSS do WordPress confira mais conteúdo relacionado no blog.

• Padrões de código JavaScript no WordPress
• Webpack mantendo a qualidade do seu JavaScript
• Como utilizar Push notification com WordPress