Codificação em CSS

Inserir espaço

Depos dos dois ponto da propriedade deve inserir 1 espaço.

Para manter boa legibilidade.

/* Recommended */
div {
  color: red;
  margin: 16px;
}
/* Not recommended */
div {
  color:red;
  margin:16px;
}

Abrir a Chave na Mesma Linha do Seletor

Sempre inserir 1 espaço depois do nome do seletor.

Padronizar o modo de escrita para ter boa legibilidade.

/* Recomended */
.selector {
  propaty: value;
}

/* Not ecomended */
.selector{
  propaty: value;
}

.selector
{
  propaty: value;
}

1 Linha para 1 Seletor

Para boa legibilidade.

/* Recomended */
.class1 .classe1b,
.class2,
.class3 {
  color: red;
}

/* Not ecomended */
.class1 .classe1b, .class2, .class3 {
  color: red;
}

Dividir as Regras

Sempre inserir 1 linha entre as regras.

Para boa legibilidade.

/* Recomended */
.class1 {
  margin: 0;
}

.class2 {
  margin: 0;
}

/* Not ecomended */
.class1 {
  margin: 0;
}
.class2 {
  margin: 10px;
}

Dividir as Seções com Comentário

Para boa legibilidade e manutenibilidade.

/* Header */

.header {
  margin: 5px 10px;
}

/* Content */
.content {
  margin: 0;
}

Não "!important"

Se sentir a necessidade do uso é a hora de rever a estrutura do CSS.

Diminui extremamente a manutenibilidade a escalabilidade.

Não usar números no início dos seletores.

Os nomes dos id e class não podem ser iniciado com números.

Erro de gramática. O seletor não vai ser reconhecido pelo navegador.

/* Not recommended */
.01class{
}

Não Usar id Para Estilizar.

Aumenta a complexidade da estrutura e diminui extremamente a manutenibilidade.

Nomear em inglês

Se há dificuldade de entender crie um comentário no fim do bloco da regra.

Aumentar a manutenibilidade e diminuir o custo de comunicação.

/* Recommended */
.declaration {
} /* declaração */

/* Not recommended */
.declaracao {
}

Dininuir a palavra quando for possivel

Para boa legibilidade e manutenibilidade.

/* Recommended */
.mgs {}
.flg {}

/* Not recommended */
.message {}
.flag {}

Não Usar Nomes Sem Sentidos

Não palavras sem significados, ou que indica a aparência.

Diminui a legibilidade, manutenibilidade e escalabilidade.

/* Recommended */
.selected {}
.important {}

/* Not recommended */
.red {}     /* Indica o Aparência */
.mx990 {}   /* Não Há Sentido */

Utilizar a Regra BEM para nomear

Referência: BEM

Padronizar a regra de nomear diminui o custo de comunicação.