70 Matrias para CSS

Esta matria uma traduo do artigo 70 Expert Ideas For Better CSS Coding Nem sempre fcil desenvolver com CSS. Dependendo do seu conhecimento e experincia, desenvolver com CSS pode se tornar uma grande dor de cabea, particularmente se voc no tiver um slido conhecimento de seletores. A criao de uma marcao semntica e apropriada o primeiro passo no caminho do desenvolvimento de uma CSS tirando o mximo proveito de atributos e propriedades. Fizemos uma anlise dos mais interessantes e teis truques, dicas, idias, mtodos, tcnicas e solues para codificao CSS e iremos mostr-las nesta matria. Acresentamos tambm algumas tcnicas bsicas que provavelmente voc j conhea e at use nos seus projetos mas que s vezes, quando mais voc precisa, no consegue encontrlas com facilidade. O resultado disto foi uma matria mostrando mais de 70 dicas dos experts, para aumentar a eficincia do seu cdigo CSS. No final da matria forneo uma lista de links para artigos relacionados.

Em breve o autor public uma verso pdf em ingls desta matria, (NT: se voc estiver interessado inscreva-se nos RSS-feed do site do autor, para ser informado do lanamento). Caso voc esteja interessado leia tambm (em ingls) 53 CSS-Techniques You Couldnt Live Without, mostrando algumas tcnicas bsicas CSS para voc usar em seus projetos. Digg esta matria se voc a considerou interessante.

Gostaria de expressar meus sinceros agradecimentos a todos os designers que compartilham sua idias, tcnicas, mtodos, conhecimento e experincia com seus leitores. Obrigado voc, ns, aos codificadores, designers, desenvolvedores, arquitetos da informao, foi muito bem-vinda as informaes por vocs compartilhadas.

1.1. Tarefa: Iniciando

Tendo criado o design grfico, comece com uma pgina em branco. Coloque nela o topo, a navegao, um contedo qualquer e um rodap. Escreva a marcao HTML. A seguir crie sua CSS. Este o caminho para as coisas funcionarem melhor. [CSSing] Limpar os estilos CSS . Voc pode eliminar a necessidade de especificar um valor para determinada propriedade, valendo-se do valor padro para a propriedade. Alguns desenvolvedores preferem zerar oa valores de margin e padding de todos os elementos logo no incio da CSS Global white space reset. Eis alguns links para consagrados autores e suas

recomendaes a respeito: Eric Meyers Global Reset, Christian Montoyas initial CSS file, Mike Rundles initial CSS file, Ping Mags initial CSS file. [Roger Johansson] Use uma folha de estilos mestre. Um dos enganos mais comuns que eu tenho observado no s em principiantes como tambm em alguns desenvolvedores de nvel intermedirio a no remoo da estilizao padro dos navegadores. A estilizao padro leva a diferenas na aparncia do design em diferentes navegadores e no h motivo para xingar este ou aquele navegador. Ao codificar um web site voc deve antes de mais nada, limpar os estilos padro do navegador. [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
master.css @import url("reset.css"); @import url("global.css"); @import url("flash.css"); @import url("structure.css"); <style type="text/css" media="Screen"> /*\*/@import url("css/master.css");/**/ </style>

Monte uma biblioteca de classes CSS. Isto muito til para debugar, mas deve ser evitado na verso de lanamento do site (separar apresentao de marcao). Uma vez que permitido e vlido usar vrias classes (por exemplo: <p class="floatLeft alignLeft width75"></p>), tire proveito disto para debugar sua marcao. (updated) [Richard K. Miller]
CSS: .width100 { width: 100%; } .width75 { width: 75%; } .width50 { width: 50%; } .floatLeft { float: left; } .floatRight { float: right; } .alignLeft { text-align: left; } .alignRight { text-align: right; }

1.2. Organize seu cdigo CSS

Organize seu CSS usando folhas de estilo mestre. Organizar auxilia na manuteno do site. Comece com uma folha de estilos mestre. Dentro desta folha importe as folhas para limpar estilos padro reset.css, a folha global.css, flash.css (se necessria), a folha para estrutura do site structure.css e ocasionalmente uma folha para tipografia. A seguir um exemplo de folha de estilo "mestre" e de como incorpor-la a um documento:
h2 { } #snapshot_box h2 { padding: 0 0 6px 0; font: bold 14px/14px "Verdana", sans-serif; } #main_side h2 { color: #444; font: bold 14px/14px "Verdana", sans-serif; }

.sidetagselection h2 { color: #fff; font: bold 14px/14px "Verdana", sans-serif; }

Organize sua CSS usando flags. Divida sua folha de estilos em sees especficas, por exemplo: estilos global (body, pargrafos, listas, etc), Topor, Estrutura da Pgina, Cabealhos, estilos para Textos, Navigao, Formulrios, Comentrios, Extras. [5 Tips for Organizing Your CSS]
/* -----------------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* -----------------------------------*/

Escreva um ndice para sua CSS. No incio da sua CSS construa um ndice dos contedos. Voc pode por exemplo destacar as diferentes reas de estilizao do seu documento (topo, contedo principal, navegao, rodap, etc). Separe de maneira facilmente identificvel as reas de estilizao. [5 Steps to CSS Heaven] Ordene as propriedades alfabeticamente. Eu no sei exatamente de onde eu tirei esta dica, mas eu a adotei em meus projetos e acredite ou no, ordenar as propriedades alfabeticamente facilita sua localizao. [Christian Montoya]
body { background:#fdfdfd; color:#333; font-size:1em; line-height:1.4; margin:0; padding:0; }

Organize o cdigo por sees. H um consenso sobre esta dica e pode parecer bvia para muitos de vocs, mas eu frequentemente vejo folhas de estilo sem qualquer organizao por sees. Isto uma prtica fcil de implementar e facilitar a leitura e manuteno do cdigo at mesmo depois de passados anos que tenha sido escrito. Ser mais fcil encontrar classes e elementos que precisam ser alterados. Exemplos: /* Estrutura */, /* Tipografia */ etc. [CSS Tips and Tricks] Organize de acordo com o alvo do seletor . Tendo organizado sua CSS em sees distribua os seletores nas sees tendo em conta o posicionamento do alvo do seletor na marcao. Isto ir facilitar a manuteno futura e dar consistncia s CSS. [Ryan Parr] Separe o cdigo em blocos . Eu uso trs blocos de cdigo. O primeiro bloco destina-se declaraes de estilo para elementos comuns em um documento Web, tais como body, links, alguns estilos para o topo, declaraes para zerar paddings e margins em formulrios e assim por diante. [] A seguir vm as declaraes para as classes, tais como classes para

estilizar mensagens de erro, enfatizar textos e colorir. [..] Seguem-se as declaraes para os containers da pgina e as margens para os elementos dentro dos container. Com uma simples passada de olhos eu consigo visualizar o esqueleto do layout e saber onde encontar os elementos que compem o documento. Mesmo os containers que no necessitam de declaes de estilo eu fao constar da folha de estilos. [Jonathan Snook]

1.3. Tarefa: Manipular IDs, Classes, Seletores, Propriedades

Use o mnimo possvel de containers. Evite sobrecarregar desnecessariamente a estrutura do seu documento. Iniciantes costumam usar uma quantidade enorme de DIVs para substituir clulas de tabelas. Considere o uso dos elementos estruturais da pgina para construir o layout. No acresente mais DIVs. Estude todas as opes antes de adicionar um container a mais (DIVs) para obter um determinado efeito que poderia ser obtido com uso inteligente das CSS na estrutura atual do documento. [Ryan Parr] Minimize o uso das propriedades. Trabalhe com inteligncia, no se estresse com CSS. E aqui h outros desdobramentos para esta dica: se no existe razo para declarar uma determinada propriedade, no a declare; se voc na certeza do porque est declarando determinada propriedade, no a declare e finalmente, se uma mesma propriedade foi declarada em lugares diferentes na sua folha de estilos, verifique a possibilidade de colocar a declarao em um lugar apenas. [CSSing] No abuse do uso de seletores. Evite seletores que no sejam estritamente necessrios. Usar poucos seletores implica em o emprego de menos seletores para osbrescrever regras para um determinado estilo em consequncia facilidade de correo de erros. [Jonathan Snook] Use o mnimo de hacks possvel. No use hacks a menos que se trate de correo para um bug bem conhecido e documentado. Esta uma dica valiosa, pois comum ver-se uso de hacks para corrigir coisas que no causadas por bugs. Ao se deparar com uma situao que voc considere ser necessrio usar hack para solucionar, faa primeiro uma busca (o Google sua salvao nestas horas) para ver se encontra alguma documentao relatando o problema que voc est tendo. [10 Quick Tips for an easier CSS life] Use constantes CSS para agilizar o desenvolvimento. O conceito de constante valores fixos a serem usados no cdigo [ muito til em CSS]. [..] Uma maneira do uso de constantes defin-las no incio das CSS usando a sintaxe para comentrios. Um uso bastante comum a criao de um glossrio de cores. Voc ter uma referncia rpida das cores usadas no site que evitar erros na definio das cores e auxiliar na eventual necessidade de alterar uma cor em toda a CSS por um processo de busca e troca. [Rachel Andrew]
# /* # Cinza escuro (texto): #333333 # Azul escuro (cabealhos, links) #000066 # Azul (topo) #333399 # Azul claro (navegao superior) #CCCCFF

# Cinza: #666666 # */

Adote um sistema intuitivo de nomear as coisas. Se voc nomear ids e classes segundo um padro, ter facilitado seu trabalho de busca por erros e de atualizao do documento. Em particular, quando trata-se de folhas de estilo muito extensas tudo pode tornar-se extremamente confuso com um padro de nomeao aleatrio. Eu recomendo um padro baseado em nomes compostos pela combinao elementopai_elementofilho. [10 CSS Tips] Nomeie IDs baseado no valor semntico. Evite usar nomes baseados na apresentao. Nomear algo como coluna-direita no uma escolha acertada, pois no futuro uma mudana de layout poder impor que sua coluna-direita esteja posicionada esquerda. E isto trar confuses no futuro, ento bom evitar nomes baseados na apresentao. [Garrett Dimon] Agrupe seletores que tenham as mesmas declaraes CSS. Agrupe seletores. Quando vrios elementos, classes ou id compartilham declaraes CSS idnticas, voc agrup-las em uma mesma regra evitando repetir a declarao em lugares diferentes na folha de estilo.Isto economiza espao e talvez muito espao. [Roger Johansson] Separe as propriedades que voc acha que sero usadas em vrios lugares na folha de estilo. Se voc acha que uma determinada propriedade ser reutilizada vrias vezes, separe-a na folha de estilos pois com isto ser possvel controlar de um lugar aquela propriedade. [5 Steps to CSS Heaven] Posicione classes e IDs para elementos o mais alto possvel na rvore do documento. Tire mximo proveito dos seletores contextuais (contextual selectors). No tenha medo de escrever seletores compostos de vrios elementos. Seletores longos podem facilitar a leitura das CSS e evitar o uso exagerado de classes ou DIVs na marcao - divitis. [Chric Casciano] Saiba explorar o efeito cascata das CSS. Suponha que voc tenha dois boxes bem parecidos no seu web site - voc pode escrever regras CSS separadas para cada um deles ou escrever regras para ambos e a seguir regras para contemplar as pequenas diferenas entre eles. [5 Steps to CSS heaven] Use as tags: <small>, <em> e <strong>. Muitas vezes voc tem sees no site que apresentam variaes tipogrficas em uma mesma linha ou mesmo prximas umas as outras. Nestes casos, em lugar de criar divs e classes para estilizar, somente porque elas no carregam semntica e tambm no poluem o seu belo cdigo XHTML no a melhor soluo Use tags semnticas. [Mike Rundles 5 CSS Tips]

1.4. Tarefa: Use notao abreviada

Abrevie a notao para cores hexadecimais. Uma cor hexadecimal composta de trs pares de dgitos admite sintaxe abreviada em CSS que consiste em representar cada par por

um dgito por exemplo: #000000 pode ser abreviado para #000 e #336699 para #369 [Roger Johansson] Defina as pseudo classes para links na ordem certa: Link, Link visitado, Link hover, Link ativo. Para ter certeza de todos os estilos para links funcionem apropriadamente voc deve declarar as regras CSS na ordem correta link-visitado-hover-ativo. Se voc pretende usar um estilo para focus ele dever ser colocado no final contudo leia esta explicao at o final antes de decidir. [Eric Meyer]
a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; }

Defina margin, padding e border na ordem certa: Top, Right, Bottom, Left. A ordem para declarar margin, padding e border a ordem horria a partir de top: Top, Right, Bottom, Left. [Roger Johansson] Use abreviar propriedades. Abreviar as declaraes para margin, padding, border, background, fonts, lists and outline economiza espao.
CSS: margin: top right bottom left; margin:1em 0 2em 0.5em; (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;) CSS: border:width style color; border:1px solid #000; CSS: background: color image repeat attachment position; background:#f00 url(background.gif) no-repeat fixed 0 0; CSS: font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Tarefa: Configurar a tipografia

Para usar EMs como se fossem pixels defina font-size 62.5% para body. O valor default para font-size 16px; adotando para body um tamanho de font igual a 62,5% voc faz com o valor default passe a ser 10px pois 16pixel x 62.5% = 10pixel. Eu defino um valor de font-size para body igual a 62.5%. Com isto consigo usar EMs para tamanhos raciocinando em termos de pixel, por exemplo: 1.3em aproximadamente igual a 1.3px. [Jonathan Snook] Use codificao universal para caracteres. [..] A resposta usar um conjunto de caracteres universal para cobrir todas as eventuais posibilidades. Felizmente existe UTF-8 baseado em Unicode. Unicode uma norma industrial projetada para permitir que textos e

smbolos de todos os idiomas sejam representados consistemente por computadores. UTF8 deve ser incluido na sua pgina Web lincado na seo head do documento. [20 pro tips]
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />

Use CSS para capitalizar. Se voc precisa apresentar um texto em maisculas, um cabealho por exemplo, no lugar de digitar o texto em maisculas no cdigo use CSS para isto. A regra CSS mostrada a seguir transforma o texto contido dentro de um elemento h1 xxxxxxxxxxxxxxxxxx(ERRO NO ORINAL) em letras maisculas independentemente de como ele tenha sido escrito no cdigo da pgina.. [20 pro tips]
h1 { text-transform: uppercase; }

possvel transformar um texto em letras maisculas diferenciadas (small-caps) automaticamente. A propriedade font-variant usada para transformar texto originariamente em minsculas em letras maisculas diferenciadas ou seja small-caps que se caracterizam por apresentar um tamanho de fonte menor do que o do restante do texto.
h1 { font-variant: small-caps; }

Vlido para toda a tipografia - defina famlias de fontes genricas. Ao declarar um determinado tipo de fonte a ser usado no site ns estamos supondo que o usurio tenha aquela fonte instalada em seu equipamento. Se ele no tiver a fonte instalada simplesmente no a ver. Por esta razo devemos especificar alternativas para a fonte principal e que a lista das alternativas termine com uma fonte genrica, como mostrado a seguir. [Getting into good coding habits]
p { font-family: Arial, Verdana, Helvetica, sans-serif; }

Use 1.4em - 1.6em para line-height. line-height:1.4 para linhas legveis, linhas com comprimento razovel no mais longas do que 10 palavras e cores com contraste suficiente mas sem exagero. Por exemplo, preto total em branco total normalmente um contraste muito forte para monitores CRT, ento adote um branco como #fafafa e um cinza escuro como #333333 para um bom contraste. [Christian Montoya] Defina tamanho de fonte igual a 100.01% no elemento html. Este estranho valor de100.01% para o tamanho de fonte, corrige uma srie the bugs em diversos navegadores. Primeiro, definir um tamanho de fonte no elemento body em percentagem (no lugar de EM) previne um problema no IE/Win que tende a aumentar ou diminuir desproporcionalmente o tamanho de fontes para textos contidos dentro de elementos onde for definido tamanho de fonte em EM. E mais, algumas verses do pera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores. Safari, por sua vez no se

comporta bem com font-size igual a 101%. Atualmente a melhor sugesto usar um valor igual a 100.01% para esta propriedade. [CSS: Getting into good habits]

1.6. Tarefa: Debugando

Adicione bordas para identificar containers. Use CSS tal como bordas auxiliares ou cores de fundo como auxiliares no desenvolvimento dos seus documentos ou com propsitos de identificao de bugs. div { border:1px red dashed; } um auxiliar efeciente. Existe ainda a ferramenta bookmarklets that apply borders que auxilia no processo de desenvolvimento e correo. Voc pode usar a regra * { border: 1px solid #ff0000; }. [Chric Casciano]. Definir bordas para um elemento ajuda na identificao de sobreposies ou de espaos extras em branco onde sua identificao no seria to bvia sem auxlio da borda. [CSS Crib Sheet]
* { border: 1px solid #f00; }

Confira o fechamento de todas as tags quando estiver debugando. Muitas vezes uma simples modificao quebra um layout de forma totalmente inesperada e isto pode ter sido causado por falta de uma tag de fechamento de um elemento na pgina. [10 CSS Tips]

2.1. Dicas tcnicas: IDs, Classes

Uma ID e muitas classes em cada pgina. Confira as IDs: Somente um elemento no documento pode conter uma ID com determinado nome, ao contrrio do nome escolhido para uma classe que pde ser atribuida a vrios elementos no mesmo documento. [..] Nomes para classes e id devem conter caracteres de[A-Za-z0-9] e hfens (-), e no podem comear com hfen ou dgito (see CSS2 syntax and basic data types). [Roger Johansson] Nomes de elementos em seletores so case sensitivos. Lembre-se de case sensitivos. Quando CSS usada com XHTML, o nome dos elementos em seletores case sensitivo. Para evitar surpresas eu recomendo usar sempre letras minsculas parta nome de elementos em seletores. Valores de classe e de ID so case sensitivos tanto em HTML como em XHTML ento evite misturar maisculas e minsculas em nome de de classes e IDs. [Roger Johansson] Use classes e IDs vlidas. ou seja beginning with a letter, comece o nome com uma letra ou com underscor. IDs devem ser nicas em mesmo documento. escolha nomes genericos, que descrevam funcionalidade e no apresentao. [CSS Best Practices] Podem ser usados vrios nomes de classes em um mesmo elemento. vlido usar vrios nomes para a classe de um mesmo elemento. Com isto possvel escrever vrias regras e estilo definindo diferentes propriedades e aplic-las convenientemente onde necessrio. [Roger Johansson]

2.2. Dicas tcnicas: Use o poder dos seletores

Roger Johansson escreveu uma srie de artigos muitssimo til sobre CSS 2.1 Selectors. (NT: A srie foi por min traduzida e encontra-se em: Seletores CSS 2.1). Recomendo vivamente a leitura da srie de artigos - a seguir listamos algumas dicas interessantes a respeito. Esteja ciente que os setores > e + no so suportados pelo IE6 e anteriores. (updated). Use seletores filho. Um seletor filho casa com um elemento filho imediato de um elemento. Um seletor filho consiste em sua sintaxe de de dois ou mais seletores separados por um sinal de maior que, >. O elemento pai o da esquerda do sinal > e permitido espao em branco antes e aps o elemento de combinao (sinal de maior que). A regra a seguir aplicada aos elementos strong que so filhos do elemento div. [Roger Johansson]
div > strong { color:#f00; }

Use seletores irmos adjacentes. Um seletor irmo adjacente constituido por dois seletores separados por um sinal de mais, +. permitido espao em branco antes e aps o elemento de combinao (sinal de mais). O seletor casa com o elemento que adjacente ao primeiro elemento. Os elementos devem ter o mesmo elemento pai e o primeiro elemento deve ser imediatamente precedente ao segundo. [Roger Johansson]
p + p { color:#f00; }

Use seletoresc de atributo. Um seletor de atributo casa com elementos baseado na presena de atributos. Existem quatro tipos destes seletores: [att] Casa com elementos que tenham um atributo qualquer e independente do valor do atributo. [att=val] Casa com elementos que tenham um atributo cujo valor seja exatamente val. [att~=val] Casa com elementos que tenham um atributo cujo valor do atributo uma lista de valores separados por um espao em branco e contenha o valor val. O valor val no pode conter espaos. [att|=val] Casa com elementos que tenham um atributo cujo valor do atributo uma lista de valores separados por um hfen comeando com val. A finalidade primeira deste seletor a de casar subcdigosde linguagem especificados no atributo lang (xml:lang no XHTML), por exemplo: en, en-us, en-gb, etc. O seletor a seguir casa com qualquer elemento p que tenha o atributo title independente do valor do atributo:
p[title] { color:#f00; }

O seletor a seguir casa com qualquer elemento div que tenha o atributo class com valor igual a error:

div[class=error] { color:#f00; }

Pode-se usar mltiplos seletores em um mesmo seletor. Com isto possvel casar um elemento baseado em diferentes atributos nele contido. A regra a seguir ser aplicada aos elementos blockquote que tenham o atributo class com valor exatamente igual a quote e tambm tenham especificado o atributo cite (independente do seu valor):
blockquote[class=quote][cite] { color:#f00; }

Use seletores descendentes. Seletores descendentes so usados para eliminar a necessidade de definir classes na marcao e ganhar eficincia nos seus seletores CSS. [Roger Johansson]

2.3. Dicas tcnicas: Estilos para Links

Cuidado ao estilizar links quando estiver usando ncoras no seu documento. Se voc usa as clssicas ncoras no seu documento (<a name="ancorar">) elas tambm sero estilizadas com as regras estabelecidades para as pseudo classes :hover e :active. Para evitar isto existem duas maneiras; usar id para as ncoras ou adotar uma sintaxe mais sofisticada, usando :link:hover, :link:active [Dave Shea] Defina o relacionamento entre links. O atributo rel indica o relacionamento semntico entre links de um documento para outro.
a[rel~="nofollow"]::after { content: "\2620"; color: #933; font-size: x-small; } a[rel~="tag"]::after { content: url(http://www.technorati.com/favicon.ico); }

A regra acima faz uso do seletor de atributo para valores contidos em listas separadas por espaos. Qualquer elemento contendo um valor de atributo relacional "nofollow" e "tag" ser casado com o seletor. Links com atributo de relacionamento com valor "nofollow" sero renderizados com um caveira e dois ossos cruzados na cor vermelha escura logo a seguir o texto e links com atributo de relacionamento com valor "tag" sero seguidos pelo cone da Technocrati. [Handy CSS] Voc pode detinguir links externos automaticamente. Muitos usam o no standard atributo de relacionamento rel="external" para distinguir links externos ao site. Contudo esta soluo implica em marcar o atributo rel em cada link externo e isto consome muito tempo e desnecessrio.A regra de estilo a seguir marca os links externos colocando logo aps o link uma seta inclinada no sentido nordeste. [Handy CSS]
a[href^="http://"]:not([href*="smashingmagazine.com"])::after { content: "\2197"; }

Para remover o pontilhado nos links use outline: none;. Artigo remove dotted links;
a:focus { outline: none; }

2.4. Dicas tcnicas: Tcnicas CSS

Especificar Id para a tag body. Na maioria dos casos adicionar uma ID para a tag body permite que voc escreva regras de estilo aplicveis a elementos contidos em uma pgina especfica. Assim, voc pode organizar melhor as sees de estilos como tambm manipular regras CSS sem alterar o template das pginas. [Ryan Parr, Invasion of Body Switchers] Criar colunas de mesma altura com CSS. O artigo Equal Height Technique explica um mtodo para simular colunas de mesma altura sem o uso de imagens de fundo. E. o artigo Faux Columns: explica com uso de imagens de fundo. Alinhamento vertical com CSS. Suponha um menu de navegao com altura igual a 2em. Soluo: defina nas CSS a propriedade line height com o mesmo valor da altura do box. Neste exemplo o box tem uma altura de 2em ento defina nas CSS line-height: 2em e o texto ficar verticalmente no meio do box! [Evolt.org] Use pseudo-elementos e classes para gerar contedo dinamicamente. Pseudoclasses and pseudo-elements. Pseudo classes e pseudo-elementos podem ser usados para formatar elementos que no constam da rvore do documento. Por exemplo: no existe um elemento para marcar a primeira linha de um pargrafo ou a primeira letra de um texto. Voc pode usar :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after e outros. Use <hr> estilizada para separar seus posts. Estilizar com imagens o elemento de marcao rgua horizontal (<hr>) pode se tornar um belo elemento separador no seu site. [CSS: Best Practices] Use em todas as pginas o mesmo cdigo (X)HTML para a navegao. Muitos sites adotam a prtica de destacar o link corrente para facilitar a orientao do usurio no site. Mas isto pode se tornar uma grande dor de cabea pela necessidade de alterar o HTML da navegao em cada pgina do site. [Ten More CSS Tricks you may not know]
XHTML: <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="sobre">Sobre</a></li> <li><a href="#" class="contato">Contato</a></li> </ul>

Declare uma ID para a tag <body>. O nome para a ID deve ser representativo da pgina e diferente para cada pgina.

CSS: #home .home, #sobre .sobre, #contato .contato { regras para destacar }

Use margin: 0 auto; para centrar seu layout na horizontal. para centrar em elemento na horizontal necessrio declarar uma largura e margens horizontais. [Roger Johansson]
XHTML: <div id="wrap"> <!-- Layout aqui --> </div> CSS: #wrap { width:760px; /* Altere a largura do layout aqui */ margin:0 auto; }

Voc pode estilizar seu RSS-feeds. Com uma folha de estilos XSL voc pode fazer muita coisa (transformar links em links clicveis, etc), mas com CSS voc pode dar uma aspecto bem mais apresentvel e no tcnico ao seu RSS-feeds. [Pete Freitag]
<?xml version="1.0" ?> <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?> ...

Voc pode esconder CSS de navegadores antigos. A maneira comum de esconder CSS de navegadores antigos com uso da diretiva @import. [Roger Johansson]
@import "main.css";

Declare margin e padding sempre em elementos nvel de bloco. [10 CSS Tips] Declare largura OU margin e padding. Minha regra de bolso que se for declarada uma largura para um elemento eu no declaro margin ou padding. Ao contrrio se eu declaro margin ou padding, no declaro largura. Manipular o box model pode se tornar uma dor de cabea especialmente quando trabalhamos com percentagens. Assim, eu declaro larguras no container e margin e padding nos elementos que esto dentro dele. Assim, tudo funciona normalmente. [Jonathan Snook] Evite aplicar padding/borders e largura fixa a um elemento. IE5 quebra o box-model estabelecendo uma confuso total. Existem metdos para corrigir isto, contudo melhor evitar isto aplicando padding ao elemento pai do elemento que tenha que ter uma largura fixa. [CSS Crib Sheet] Fornea folha de estilo para impresso . Voc pode criar uma folha de estilo para impresso de modo semelhante a uma folha de estilo comum de apresentao da pgina:
<link rel="stylesheet" type="text/css" href="print.css" media="print">

ou
<style type="text/css" media="print"> @import url(print.css); </style>

Isto assegura que as CSS sero aplicadas somente para imprimir o documento, sem afetar a apresentao da pgina na tela. Uma folha de estilo para impresso garante um fundo branco e um contedo textual em preto, alm de excluir da impresso sees da pgina que no interessam em mdia impressa.. More about CSS-based print-Layouts. [20 pro tips]

2.5. Dicas tcnicas: comportamentos do IE

Voc pode forar o IE a aplicar transparncia PNGs. Em tese, arquivos PNG suportam vrios graus de transparncia; contudo um bug do Internet Explorer 6 impede eles sejam empregados cross-browser. [CSS Tips, Outer-Court.com]
#regular_logo { background:url('test.png'); width:150px; height:55px; } /* \ */ * html #regular_logo { background:none; float:left; width:150px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale'); } /* */

Voc pode declarar min-width e max-width para o IE. Use as expresses dinmicas proprietrias da Microsofts para isto. [Ten More CSS Trick you may not know]
#container { min-width: 600px; max-width: 1200px; width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto"); }

Voc pode usar Comentrios Condicionais para servir o IE. A maneira segura de servir o IE/Win atravs do uso de comentrios condicionais. mais seguro para o futuro usar a tecnologia proprietria da Microsofts denominada comentrios condicionais do que usar hacks CSS. Voc pode us-los para servir uma folha de estilos separada, somente para corrigir comportamentos do IE/Win. [Roger Johansson]
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

----------------x-x-x---------------

fim da matria

---------------x-x-x---------------

Enquete

Lamento. No h enquetes no momento. Ver arquivos de enquetes

Esta matria foi publicada em: 2007-05-29 (tera-feira). Subscreva o feed RSS 2.0 para comentrios. Comente abaixo, ou link para http://www.maujor.com/blog/2007/05/29/70-dicas-para-escrever-css/trackback no seu site.

Lamento! Seu navegador no permite visualizao de comentrio.

33 comentrios na matria: 70 dicas para escrever CSS

1. 70 Expert Ideas For Better CSS Coding | Smashing Magazine disse: 2007 - 05 29 20:04 GMT

[...] Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurcio Samy Silva. [...]

2. Diego

disse: 2007 - 05 - 29 21:02 GMT

Obrigado Maujor, por essa traduo!

Mais uma vez voc provou que esse site realmente a melhor referncia de CSS em lngua portuguesa. Est de parabns mesmo!!!

3. Rafael Marin

disse: 2007 - 05 - 29 22:33 GMT

timo artigo! Tinha pensado em traduz-lo, mas devido ao seu tamanho acabei por perder a vontade. Muito bom, parabns!

4. Rodrigo Kono

disse: 2007 - 05 - 30 11:55 GMT

timo artigo Maujor. Vc disse sobre usar f. estilo mestre com @import url. Eu tive problemas para separar o meu CSS com import. Alguns browsers acaba no aceitando. Cada browser l o import de uma forma. Com isso a minha arquitetura de sepao do CSS foi por gua abaixo. Tive que colocar tudo em um nico arquivo. Sugiro que no prximo artigo voc fale disso para ns. =) Abrao e parabns pelas informaes!

5. Guilherme Veras

disse: 2007 - 05 - 30 12:48 GMT

Maujor sempre somando, parabns Aguardamos os prximos

6. Adeonir

disse: 2007 - 05 - 30 15:46 GMT

Eu estava lendo o CSSBeauty quando me deparei com isso: Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurcio Samy Silva. Valeu a Maujor, realmente um referncia em nossa lngua.

7. James Clebio

disse: 2007 - 05 - 30 15:57 GMT

Excelente trabalho, Maurcio! Isto apenas refora o meu total respeito pelo trabalho que vem fazendo em prol do desenvovlimento Web Bom, no tpico 1.4. Tarefa: Use notao abreviada, item Defina margin, padding e border na ordem certa, achei errnea a seguinte colocao: a ordem anti- horria a partir de top No seria ordem horria? Contudo, sinto-me mesmo muito beneficiado e feliz com o seu trabalho!

8. Maujor

disse: 2007 - 05 - 30 17:06 GMT

@James, Grato por apontar o engano. Foi devidamente corrigido.

9. Ronildo Costa

disse: 2007 - 05 - 31 2:45 GMT

Valeu pelo artigo Maujor, muito bom. Linkei para o meu blog. http://www.ronildo.com.br/blog/

10. Ronildo Costa

disse: 2007 - 05 - 31 3:53 GMT

Acabei de ver no item 1.4. Tarefa: Use notao abreviada O hexadecimal tem um 0 a mais. E na abreviao tmb tem um 0 a mais.

11. Maujor

disse: 2007 - 05 - 31 10:14 GMT

@Ronildo, Grato por apontar o engano. Foi devidamente corrigido.

12. Micox

disse: 2007 - 05 - 31 12:00 GMT

Umm, timas dicas. Gostei da idia se usar constantes falsas pra cores (aquelas que ficam dentro dos comentrios), das dicas de tipografia, da tcnica pra estilizar o menu atual da pgina, da dica pra declarar ou largura ou margin/padding, As outras ou eu j conhecia ou no achei taao interessantes, apesar de serem todas boas. tima traduo Maujor. No sei o que seria do CSS nacional sem voc. S um detalhe/correo que eu acho que deve ser feita na dica sobre links ncoras: Acredito no ser mais necessrio usar tags a para conter ncoras. Isto deselegante. Os navegadores que eu utilizo atualmente conseguem muito bem chegar a ncoras (ids) que estejam em qualquer elemento. Exemplo: L no meio do meu documento eu tenho Capitulo 3 - ncoras. Se eu for na barra de endereos (no FF e IE) e digitar http://servidor.com/pagina.htm#cap3 o navegador ir muito bem ir direto ao Captulo 3. T certo ou me enganei?

13. Micox

disse: 2007 - 05 - 31 12:08 GMT

Ops. Acima onde h Capitulo 3 - ncoras, considerar que uma tag h1 ou 2 ou 3 qualquer QUE contenha o id=cap3. ( que o sistema de comentrios removeu minha tag).

14. Carlos Eduardo

disse: 2007 - 05 - 31 14:44 GMT

Dicas extremamente teis, no s para iniciantes, com certeza. Alis, uma tpico que darei uma olhada com mais ateno aquele relacionado a colunas com alturas iguais, sem utilizar imagens. Estou precisando disso num site e vou ver como Obrigado pela ajuda!

15. Nando

disse: 2007 - 06 - 2 16:31 GMT

Dicas excelentes!!! Com certeza foi muito uteis. Parabns

16. Flavio Mendes

disse: 2007 - 06 - 4 13:45 GMT

Muito bem, seu Maurcio. um daqueles artigos que vale pena salvar e imprimir. Agora o que todos ns desejamos: UM LIVRO BY MAUJOR Uma dica para o nome do livro: O BOM do Css com MAUjor Os outros usurios bem que poderiam sugerir nomes tambm

17. Josue Gimenes

disse: 2007 - 06 - 8 17:47 GMT

Grandes dicas Maurcio, parabns pelo artigo! http://www.grifemidia.com.br/blog

18. Yalli Oliveira

disse: 2007 - 06 - 12 2:20 GMT

Poderia eliminar vrias dessas dicas, usando apenas o zerador de seletores. 19. Jos Carlos Web Designer Blog Archive Retirar o pontilhado dos links disse:
2007 - 06 - 12 11:38 GMT

[...] Fonte: Blog do Maujor [...] 20. dot 70 Expert Ideas For Better CSS Coding disse: 2007 - 07 - 13 6:50 GMT [...] Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurcio Samy Silva. [...]

21. Hanover

disse: 2007 - 07 - 27 12:29 GMT

Maujor, me tira uma dvida, por gentileza. master.css @import url(reset.css); @import url(global.css); @import url(flash.css); @import url(structure.css); reset.css e global.css esto bem compreendidos na minha cabea. Agora o structure.css seria pra definir as classe dos divs, por exemplo? E o flash.css, qual seu intuito?

22. HOSPE

disse: 2007 - 08 - 20 20:18 GMT

Euacho que deve ser feita na dica sobre links ncoras, provou que esse site realmente a melhor referncia de CSS. 23. Css7.cn 70 Expert Ideas For Better CSS Coding disse: 2007 - 10 - 26 10:58 GMT [...] Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurcio Samy Silva. [...]

24. Jonathan

disse: 2007 - 11 - 6 9:59 GMT

Grandes dicas com certesa vo ser extremamente uteis. na sesso 2.5 a ultima dica dis que possivel atribuir um valor min-width com atributos proprietarios do IE, o mesmo valido para min-height? 25. CSS mnimo - Trcio Zemel disse: 2007 - 11 - 23 15:09 GMT [...] Para constar, gostaria de deixar registrado que uma das bases do que vou apresentar aqui foi tirada da compilao 70 Expert Ideas For Better CSS Coding, do Smashing Magazine - e traduzida pelo Maujor, em seu blog; outra, vem do meu prprio conhecimento e experincia com CSS. [...] 26. CSS mnimo | desenvolvimento para web disse: 2008 - 01 - 9 23:34 GMT [...] Para constar, gostaria de deixar registrado que uma das bases do que vou apresentar aqui foi tirada da compilao 70 Expert Ideas For Better CSS Coding, do Smashing Magazine - e traduzida pelo Maujor, em seu blog; outra, vem do meu prprio conhecimento e experincia com CSS. [...]

27. Ivaldo

disse: 2008 - 03 - 11 18:25 GMT

Testei a dica Voc pode detinguir links externos automaticamente mas no funcionou. Maujor, poderia ser feito uma matria especfica para esse assunto. 28. Recursos y Tutoriales Blog Archive 70 ideas para mejorar la codificacion CSS disse: 2008 - 05 - 6 12:47 GMT [...] Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurcio Samy Silva. [...]

29. Allan Tavares

disse: 2008 - 06 - 14 5:50 GMT

Este site est de parabns, sempre quando falo sobre CSS com o pessoal da escola tcnica uso este site como principal referencia.

30. Renato

disse: 2008 - 06 - 26 12:06 GMT

cara vc e fod@ d + nao sei nada de css mas meu site tem muito ou quase tudo em css e so foi possivel graas a vc 31. egyptianwebdesigner.com Blog Archive 70 Expert Ideas For Better CSS Coding disse: 2008 - 07 - 6 22:16 GMT [...] Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurcio Samy Silva. [...]

32. Danilo bom dia, Otimas dicas,

disse: 2008 - 09 - 11 13:31 GMT

estou tentando usar a dica width:expression(document.body.clientWidth > 100? 100px : auto); o problema que independente se a imagem maior ou menor, ela fica definida como 100px

alguem poderia me mostrar algum exemplo funcionando para ver o que estou fazendo de errado. eu estou fazendo o seguinte: div.moduleS1 img {margin: 23px 0 0 10px; max-width: 100px; width:expression(document.body.clientWidth > 100? 100px : auto);} grato 33. Yasar Gokcek - 70 Expert Ideas For Better CSS Coding disse: 2008 - 09 - 27 13:06
GMT

[...] Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurcio Samy Silva. [...]