Padronização CSS

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!

You may also like...