Dicas para otimizar seu CSS
Postado em 05/11/2008 na(s) categoria(s) Padrões WebAproveitando 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.
Comentado em 05/11/2008 por Leonardo DNA:
Eu acho muito ruim quem não coloca tudo numa linha só, fica praticamente impossível de se ter uma visão rápida do CSS. Faltou só algo do tipo “olha, tantos % de economia!”, pq medir as coisas em bytes sempre deixa a galera achando que é pouco.
Comentado em 09/11/2008 por Francisco Costa:
Penso que isso é um preciosismo que não se justifica nos dias de hoje, além disso torna o código menos legível. A primeira opção continuará a ser a melhor, mesma para um site com muito tráfego, pois esses normalmente são desenvolvidos por várias pessoas.
Cumprimentos!
Comentado em 09/11/2008 por Marcelo:
A nível de otimização enquanto tamanho de bytes, é muito bom mesmo, mas na camada de desenvolvimento, principalmente quando há várias pessoas envolvidas, fica muito ruim a legibilidade e entendimento para um “humano”, por assim dizer.
Agora, há aí duas coisas diferentes, uma é resumir as propriedades e condensá-las, que pode e deve ser feito sempre, independente da forma como os seletores são indentados, e outra é a forma como ele é minificado, que independente da forma como está escrito, também.
Abraços!
Comentado em 09/11/2008 por Samuel Batista:
Leonardo, eu utilizo um esquema semelhante a esse seu mas acho que você poderia otimizar mais ainda o seu se os parâmetros fossem organizados de ordem alfabética. Cada desenvolvedor tem seu próprio padrão de importância, então o que é importante para você pode não ser para outro. Então utilizando da ordem alfabética o padrão fica impessoal.
Quanto aos espaços, eu mantenho o meu CSS com espaços antes e depois das chaves e sempre após o “;”. Acho que a economia de banda só é significativa quando se tem um grande portal, quando eu digo um grande portal eu estou me referindo ao UOL ou Globo.com! Caso contrário, você só estará perdendo tempo com um código blocado que vai acabar te atrapalhando visualmente!
Espero que não me leve a mal, tentei ser construtivo em minha crítica!
Comentado em 10/11/2008 por Miltinho:
Primeiramente, parabéns ao Leonardo pela matéria, é sempre importante termos esse pensamento de otimização e economia e é por isso que a tecnologia anda tão rapidamente.
Por outro lado, o tempo gasto em análise perdida ao termos um código de difícil compreensão também deve ser considerado. Com esses dois pensamentos eu proponho sempre a mim mesmo (é claro) equilibrar as coisas, vale a pena otimizar e perder a legibilidade e facilidade de manutenção? Aí depende do caso e da facilidade de cada um.
Acho que todos que comentaram aqui tem suas próprias facilidades e ponto de vista.
Parabéns a todos, bom trabalho!
Comentado em 10/11/2008 por Daniel Anand:
Considerando que praticamente todos os navegadores e servidores Web suportam a compressão de arquivos html “on-the-fly”, faz sentido esse tipo de economia?
Comentado em 10/11/2008 por Danilo:
Também trabalho assim, é questão de costume e sinceramente vejo mais vantagens em construir várias propriedades em uma linha só, pois você consegue ver muito mais código na sua tela, é fica mais fácil de se trabalhar sem precisar dar page up/page down a toda hora, sem falar do tamanho do arquivo.
Comentado em 10/11/2008 por Micox:
Concordo com você e discordo da última postagem do site Tableless. Isso ajuda muito na visualização sim e também ajuda caso o user não faça cache do CSS (site com visitantes não fiéis).
Comentado em 10/11/2008 por Leonardo Caineli:
Pessoal, não sei se o meu comentário vai ser liberado no tableless.com.br (até agora não foi), enfim, vou comentar aqui também, segue abaixo:
Opiniões divididas é um ótimo sinal de que aquele post não está com a razão. A internet avança rápido demais, se não nos acostumarmos com novos padrões ficaremos estagnados no mercado. Acredito que todos aqui querem trabalhar (ou já trabalharam) em grandes projetos, e esta é a realidade hoje: páginas rápidas = economia de banda = retorno de R$ para as empresas. Para os que ainda têm dúvidas, seguem alguns CSS´s que a maioria de vocês deve acessar:
globo.com.br:
http://www.globo.com/Portal/cda/estilo_css_cda/0,,6637-0-1795980775,00.css
uol.com.br (CSS embedded):
http://www.uol.com.br/
ig.com.br:
http://images.ig.com.br/homeigv25/home_v081106a.css
terra.com.br (6 requests):
http://www.terra.com.br/capa/css/estrutura_olimp_26.css
http://www.terra.com.br/capa/css/moduloComunidades2.css
http://www.terra.com.br/capa/css/css_videos_olimp_26.css
http://www.terra.com.br/capa/css/css_noticias_olimp_26.css
http://www.terra.com.br/capa/css/css_abinhas_olimp_26.css
http://www.terra.com.br/capa/css/css_olimp_26.css
Para fechar, faço questão de postar a url do CSS do meu blog para comprovar que otimização e organização podem sim andar de mãos dadas:
http://leonardocaineli.com.br/wp-content/themes/leonardocaineli/style.css
Longe de mim ditar como cada um de vocês deve programar, mas o mínimo que posso fazer é comprovar o que postei mostrando claramente a realidade de hoje. Fico muito feliz que a grande maioria pensa e/ou adota as mesmas idéias.
Abraços,
Leonardo Caineli
Comentado em 10/11/2008 por Guilherme Nagüeva:
Eu gosto e compartilho da mesma opnião que você. E defendo a escrita de todos os atributos em uma só linha não apenas pela economia de banda, mas também por ser mais fácil de visualizar informações.
Escrevendo em apenas uma linha você analisa muito mais código em menos espaço. Isso ajuda quando você trabalha com grandes projetos, tem um código muito grande e precisa encontrar bugs, por exemplo. Escrevendo o código dessa forma, apesar de ser difícil de se acostumar, você consegue analisá-lo de maneira mais rápida, é apenas uma questão de costume.
A primeira vista é complicado, mas depois facilita, e muito, a vida de quem lida diariamente com CSS.
Comentado em 10/11/2008 por Leonardo DNA:
Caramba, o assunto aqui tá bombando… =P
Me pergunto se a galera que fala de legibilidade do código já programou alguma vez em um monitor widescreen (não um 22″ que substitui dois monitores, mas abrir o seu modesto notebook com resolução de 1440×800) e tentou editar algum CSS. Em CSS expandidos, dá pra ver uns 5 itens no máximo, enquanto em uma linha só dá pra ver fácil uns 20 itens, é mais fácil procurar algo na própria tela, ou ficar rolando a mesma?
E claro, acima de tudo, quando se trata de equipes de programação, esses detalhes devem ser escolhidos pelos usuários. A equipe escolhe o que achar melhor pra eles como um todo e manda ver, fim do problema. =]
Comentado em 11/11/2008 por Rodrigo Fante:
Concordo com você e discordo da última postagem do site Tableless. Isso ajuda muito na visualização sim e também ajuda caso o user não faça cache do CSS (site com visitantes não fiéis). Onde trampo aqui em Londres só fazemos assim, é o “padrão” fora do Brasil de se trabalhar.
Comentado em 11/11/2008 por Willie Oliveira:
A primeira coisa que procuramos em um arquivo CSS são os seletores, o método “condensado” que o Leonardo sugere tem sua vantagem por oferecer uma leitura/localização ágil dos mesmos.
A leitura vertical (humana) de seletores é muito rápida quando na forma condensada, mas assim que for localizado o passo seguinte é a leitura das propriedades que por sua vez inverte a direção da leitura para horizontal trazendo certa impaciência.
Os contrários ao estilo compactado alegam que a questão da legibilidade será fator relevante no repasse de código a outro desenvolvedor, no entanto, esta questão pode ser simplesmente resolvida de forma análoga ao Javascript, nunca vi alguém reclamar de códigos distribuídos em dois formatos (ex: jquery-1.2.6.min.js e jquery-1.2.6.js). Isto poderia até ser uma convenção do projeto a ser desenvolvido em uma equipe ou para uma empresa em particular eliminando o “problema”.
A MINHA OPINIÃO, é que através das experiências que tive o modo condensado traz benefícios nítidos quando um seletor trabalha com um número não muito grande de propriedades. Ou seja, se modularizarmos o CSS de forma inteligente, dificilmente haverá dificuldade de leitura.
Parabéns Leonardo, a Web merece ser discutida, avaliada e uma opinião pessoal não pode ser confundida como uma verdade universal.
Comentado em 11/04/2009 por Ferramentas para compactar/otimizar CSS:
[...] preferir pode seguir a dica do Leonardo Caineli e fazer a otimização [...]
Comentado em 25/09/2009 por rafael vergani:
Otimizar CSS deixando tudo em uma linha não é uma prática que eu admiro, pois dificulta a manutenção.
Comentado em 09/12/2009 por Oggy:
Outra dica boa é o site http://www.otimizarcss.com. Formata e otimiza seu CSS. =)