Padrões aumentam a confiabilidade e manutenibilidade do projeto. Também influenciam na aceitação do projeto pela equipe e na adoção por novos membros. O CSS deve ser padronizado e organizado para que não seja um freio na evolução do seu projeto.
Seletores
Específicos
body > section > article > header article.materia > header.cabecalho > h1.titulo .materia .cabecalho .titulo h1
Nomes reservados (ou namespaces)
.materia .materiaCabecalho .materiaCabecalhoTitulo .materiaTextoFotoLegenda
Nomes reservados e seletores específicos
.materia .materia-cabecalho .materia .materia-titulo .materia .materiaTitulo .materia .materiaTexto
Depende do projeto. Seletores específicos tendem facilitar a utilização, porém dificultam a criação de novos elementos. Namespaces são ótimos para muitos componentes e variações visuais. Não desmereça nenhum deles, pode ser que para um projeto fique melhor que para o outro. Mas preste atenção, um indício de que algo não está indo bem é muita sobrescrita e uso excessivo de !important.
Hífen e camel case
Algumas pessoas acham o hífen mais visual, outras não. Vale ressaltar que na construção das tags prevalece o minúsculo e nas propriedades, quando necessário é usado o hífen para separar termos, sendo assim classes com hífens mantém a harmonia do HTML. Por outro lado cada hífen é um caractere e para um site com muitos acessos todos esses hífens podem pesar. Suponhamos que a página tenha 1 milhão de acessos e 100 classes com uma média de 1 hífen por classe. No final do dia são 100 milhões de caracteres trafegados a mais. Repare nos nomes de classes do Google.
Reserve nomes
Reservar nomes para modificadores e classes que representam situações é ótima opção quando seu uso é frequente. Nomes como .aberto, .fechado e .ativo devem ser reservados e utilizados como seletores múltiplos.
.caixa.aberta {}
.caixa.ativa {}
Idioma
O que for de sua preferência e de sua equipe. Porém mantenha o padrão, não gere combinações do tipo .caixa.open e .articleTitulo.
Propriedades
Todas as definições numa linha ou uma por linha.
.single-line {background:white; color:black;}
.multi-line {
background: white;
color: black;
}
É questão de gosto. Há quem liste as vantagens de uma sobre a outra. Mas no final dá na mesma, no single-line você terá um código mais horizontal e no multi-line vertical. Facebook adota na maior parte de seu código single-line e o Google multi-line.
A recomendação é organizar as propriedades em ordem alfabética.
Prefira:
.seletor {
background: white;
border: 1px solid gray;
color: black;
height: 30px;
margin: 0;
padding: 0;
width: 100px;
}
Em vez de:
.seletor {
height: 30px;
margin: 0;
color: black;
padding: 0;
width: 100px;
border: 1px solid gray;
background: white;
}
Isso deve evitar a duplicação de propriedades.
Emfim…
Lembre-se de… manter o padrão!
