DESENVOLVIMENTO EM CSS – MANUAL DE BOAS PRÁTICAS » Pinceladas da Web

DESENVOLVIMENTO EM CSS – MANUAL DE BOAS PRÁTICAS

Postado em: 14 de fevereiro de 2008 por Pedro Rogério

Esse manual é uma tradução do artigo de Reinhold Weber: 50+ CSS Best Practices and Coding Guidelines.

Coisas a evitar

CSS in-line.
Tamanho de fontes absolutas.
Utilizar “aspas” para marcar o caminho das imagens.
CSS Hacks.
Redeclarar valores herdados.
Aplicar padding, bordas e larguras fixas para os elementos.
!important e position:absolute.
Nomes para Classes e IDs baseados em sua aparência.

Boas práticas

Declarações CSS em uma única linha.
Comente seu código.
Organize seu arquivo CSS.
Indentação conforme necessário.
Construa um código de fácil leitura.
Utilize um sistema de nomemclatura comum.
Declarações em Ordem alfabética.
O “;” não é necessário para a última declaração.
Quando uma unidade declarada for 0 px/em/%/… você pode omitir a unidade.
Utilizar o mínimo de divs, propriedades e seletores CSS.
Agrupar seletores lhe permite selecionar vários elementos de uma só vez.
Muitas propriedades podem ser abreviadas.
Cores devem ser declaradas em modo Hexadecimal.
Defina Pseudo-classes para seus links na seguinte ordem: LoVe/HAte.
Defina elementos como margin, padding e bordas na seguinte ordem: TRouBLed.
Faça uso seletores filho.
Faça uso de diferentes tipos de mídia.
Nomeie suas classes e ID’s referentes a função, e não a aparência.
Aprenda a explorar o efeito cascata. CSS tem sofisticadas regras de herança.
Faça uso de seletores de atributo. Seletores de atributo correspondem a elementos com base no valor dos atributos.
Deixe os textos em letras maiúsculas através de CSS.
Organize os elementos por grupo, como: header, container, footer…para uma melhor visão global.
Se inspire nos códigos de grandes empresas.
Busque inspiração com os gurus do design.
Dê uma olhada no Framework CSS Blueprint, de lá você pode tirar grandes idéias.

Facilite sua vida

Utilize algum Cheat Sheet CSS.
Teste seu CSS primeiramente em browsers mais avançados, e depois nos outros, nunca antes.
Quando estiver em dúvida, valide seu código.
Teste embutido, lance importado.
Mantenha uma biblioteca com classes úteis em CSS.
Experimente utlizar algum compressor de CSS on-line, alguns dos métodos que eles utilizam para reduzir o tamanho dos seus arquivos CSS você pode utilizar para desenvolver um arquivo de forma racionalizada.
Utilize a Web Developer Toolbar para Firefox.
Utilize algum framework CSS, por exemplo “Blueprint”.

Você sabia?

Você pode utilizar multiplas classes em um único elemento.
Defina valores constantes ao longo de um documento CSS.

Uma opção simples é definir cores para cada estado em que você deseja. Ao decorrer do documento, você pode ir alterando se necessário. Isso é bastante trivial.

Uma vez que um elemento pode ter mais de uma classe sobre ele, você pode aplicar classes para cada constante ou variável que deseja criar, e em seguida atribuir essas classes a elementos (x)HTML que deseja afetar. Uma vez que um elemento pode ter mais de uma classe sobre ele, este não deve interferir em eventuais utilizações existentes. Portanto, se você deseja alterar a cor, tudo o que precisa fazer é alterar a cor na classe definida.

Pode utilizar linguagens Server-Side para escrever seu CSS.

Existem alguns exemplos de CSS Server-Side pré-configurados hoje. Parecem ser os melhores desenvolvidos.

Pode adicionar estilos CSS aos seus Feed RSS.
Pode previnir o Spam com CSS.
Você pode customizar o design do seu site dinamicamente criando o arquivo CSS com PHP.
Existem idéias para padrões de desenvolvimento em CSS.

Isso pode lhe interessar:

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web é proprietário do blog CSS no Lanche, blog voltado ao desenvolvimento front-end.

Deixe seu comentário

12 comentários para esse post

Bruno disse: 14.02.08 ás 09:09

#1

Dicas valiosas para utilização de CSS. Parabéns pela iniciativa da tradução do documento publicado pelo Reinhold Weber.
Muitos desenvolvedores iniciantes, até mesmo os mais experientes cometem alguns pecados na criação do CSS do site. Este manual pode servir como referência para todos os desenvolvedores.
Pedro, só senti falta do link para o framework para o framework Blueprint, então aí vai:
http://code.google.com/p/blueprintcss
Abraços.
VitorGGA disse: 14.02.08 ás 09:28

#2

# Utilizar “aspas” para marcar o caminho das imagens.
# Aplicar padding, bordas e larguras fixas para os elementos.

As aspa eu só não sakei prq!? E o lance da largura fixa eu até entendo, mas, padding e bordas!?
Pedro Rogério disse: 14.02.08 ás 09:46

#3

@Vitor,

Essa só o autor do artigo original para explica pra gente mesmo, pois se fosse eu quem tivesse descrito esse manual, tentaria deixar as coisas de uma forma mais clara!!!
Rochester disse: 14.02.08 ás 16:14

#4

É, tem muitas coisas que podem ser contestadas aí
o position absolute e o !important por exemplo, são valiosos muitas vezes. O important pode poupar linhas de código, e o position absolute não vejo problemas com ele
“Se inspire nos códigos de grandes empresas.” tem grandes empresas de desenvolvimento que cometem erros básicos de codificação :/
“Utilize a Web Developer Toolbar para Firefox.” recomendo também o firebug. apeasr dos constantes bugs atuais :/
“Pode utilizar linguagens Server-Side para escrever seu CSS.”
aí perde-se a vantagem do chaching do arquivo css.
“Pode previnir o Spam com CSS.” essa nao entendi
[]’s
TOn disse: 14.02.08 ás 16:48

#5

Ótimas dicas!!
Muito obrigado por estas dicas tão preciosas.
Salaam
Pedro Rogério disse: 14.02.08 ás 21:14

#6

@Rochester

Dê uma olhada nesse meu artigo que lá está uma forma de ocultar o e-mail dos spammers só com CSS.
Gustavo Krause disse: 14.02.08 ás 22:11

#7

Quando o CSS é bem feito, difícilmente é preciso usar “!important “, podem até ver que no site do W3C que não é usado. O “!important” é um método de facilitar a vida dos preguiçoso.

Não posso dizer que eu nunca usei, já usei sim, mas por questões de prazo de entrega. As vezes é muito melhor usar um simples “!important” do que reformular grande parte do documento CSS, ou até todo o documento talvez, principalmente quando o cliente ou sei lá para quem você está fazendo não está nem ai para o seu código.

Sobre o “absolute”, eu acredido que Reinhold está se referindo a diagramação com esses elementos, o que eu também acho totalmente errado. Para mim, elementos absolutos são apenas para ficar “voando” no site, acredito que essa é forma correta de usar este atributo.

Mas é isso, falei demais, achei muito bom esse MANUAL DE BOAS PRÁTICAS, só precisa de alguns ajustezinhos… e ai dá pra fazer até um poster e colocar no quarto.
Rochester disse: 16.02.08 ás 22:47

#8

Uia, muito boa a técnica contra spammers! lol

e tinha visto um replace de js, me pareceu a melhor forma até agora, mas essa é muito boa tbm

[]’s
Rochester disse: 17.02.08 ás 19:18

#9

Discordo a respeito do important.

e se fosse “hack” nao seria validado pela w3c
Gustavo Krause disse: 18.02.08 ás 10:51

#10

O “!important “ não é hack.

Ele foi criado para auxiliar o usuário. Em especial para aqueles que necessitam de algo mas acessível [ http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override ].

“!important” não é para quem projeta.

Usar este atributo significa que o seu CSS está mal estruturado.

Vejam o Opera como são feitos os Modos disponibilizados para visualização. Todos os atributos tem “!important”.

Basicamente essa é a idéia.
Blog Área Local Boas leituras disse: 22.02.08 ás 09:26

#11

[...] Desenvolvimento em CSS – Manual de boas práticas [...]
Édipo disse: 28.06.08 ás 00:20

#12

sobre o padding, existe bugs no ie que fazem ele ser calculado erroneamente, e margin com elementos declarados com float da bug as vezes tambem no IE, ele dobra a margem.