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.