Leonardo Caineli Web Designer e Programador de Interfaces

Dicas para otimizar seu CSS

Aproveitando o post sobre Identação e boas práticas, vamos falar um pouco sobre o CSS. Diferente do XHTML, o CSS pode ser tratado de outra forma, deixando de lado a identação convencional (utilizando TAB’s ou espaços) para utilizar um método otimizado.

Exemplo utilizando a identação convencional (338 bytes):

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	list-style: none;
	text-decoration: none;
}

ul {
	padding: 10px;
	border: 1px solid #CCC;
	width: 485px;
	height: 37px;
	background: #EEE;
}

ul li {
	float: left;
	padding: 10px;
	border: 1px solid #CCC;
	font: 12px arial;
	color: #666;
	background: #FFF;
}

Exemplo utilizando o método otimizado (285 bytes):

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Menu */
ul{padding:10px;border:1px solid #CCC;width:485px;height:37px;background:#EEE}
ul li{float:left;padding:10px;border:1px solid #CCC;font:12px arial;color:#666;background:#FFF}

Lembrando que cada TAB, quebra de linha ou espaço consumirá 1 byte, devemos eliminá-los mesclando todos os seletores, propriedades e valores, removendo sempre o último “;” (ponto e vírgula) antes do fechamento da “}” (chave). Um outro ponto importantíssimo é sabermos mesclar as propriedades utilizando a declaração única.

Exemplo utilizando a declaração única:

/* Declaração normal */
ul li{border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;border-left:1px solid #CCC}

/* Declaração única */
ul li{border:1px solid #CCC}

A idéia é termos um documento leve afim de economizar R$ por conta da diminuição do consumo de banda, porém a organização é essencial para justificar a ausência da identação, para isso, procure adotar um padrão na ordem das propriedades e identifique cada bloco utilizando comentários.