Evolua seu CSS – Dicas



Qualquer linguagem de computador não se limita apenas a entender sua sintaxe a aplicá-la, envolve outros detalhes que qualificam seu código e eleva seu status de um simples conhecedor para um profissional.
Abaixo você vai conferir uma lista de dicas que irão ajudar a escrever uma folha de estilo mais enxuta e otimizada.

Dica:“Matenha tudo simples” é a dica mais importante e define todas as outras:

Organização

A importância de um código organizado é a mesma de se ter um ambiente de trabalho, ele irá aumentar sua produtividade, vai permitir que outros entendam seu código e principalmente vai facilitar para você, se localizar.

1 – Use Shorthand

De forma a simplificar e diminuir consideravelmente o número de linhas todas as propriedades possui uma forma reduzida de declaração.

.classe {
margin-top: 10px;
margin-right: 11px;
margin-bottom: 12px;
margin-left: 13px;
}
.classe { margin: 10px 11px 12px 13px }

Você pode conferir um guia completo das propriedades no blog do Eduardo Marin.

2 – Mescle os estilos de formatação

Existem dois tipos básicos de formatação. A de múltiplas linhas:

.descricao {
position:absolute;
left:60%;
margin-left: -167px;
width:334px;
}

e a de uma linha

.descricao { position:absolute; left:60%; margin-left: -167px; width:334px; }

pode ser incrementado com identenção e tabulação

.descricao {
position:absolute;
left:60%;
margin-left: -167px;
width:334px;
padding: 10px 0;
}
/*Tabulação e Identado em relação a classe pai descrição */
.descricao .redes-sociais { margin: 8px 0 0 100px;}
.descricao .redes-sociais ul li { float:left; }

muitos sites recomendam que se escolha uma maneira e mantenha uma consistência, obtendo uma melhor leitura. Aconselho a misturar as duas formatações: todo elemento que tiver apenas uma declaração de propriedade seja posto em uma linha e mais em múltiplas linhas. Esta simples regra diminui consideravelmente o numero de linhas do seu código.

3 – Agrupe os elementos

Agrupar os elementos que possuem declarações semelhantes é uma ótima forma de poupar linhas e tempo. Você pode declarar todas as propriedades que se repetem em vários elementos em apenas uma linha, e as específicas, separadamente:

h1,h2,h3 {
font:italic small-caps bold Verdana, Arial, Helvetica, sans-serif;
color: #000
}
h1 { font-size: 18px}
h2 { font-size: 16px}
h3 { font-size: 14px}

4 – Comece do topo e Idente

Trabalhe sempre na estrutura de cima para baixo.

  1. Estilos Gerais
  2. Header
  3. Navegação
  4. Principal

e não esqueça de identar, uma prática pouco usada em css mas que ajuda na leitura, principalmente de listas e afins:

ul.column {
width: 100%;
padding: 0;
list-style: none
}
ul.column li {
float: left;
width: 275px;
margin: 5px 0 31px 0
}
ul.column li a { color:#fff }

5 – Comente, sumarise e catalogue

Os comentários podem ser usados para diversos fins no seu código.

Comentar alguma propriedade especifica:

#navegacao {
margin: 10px 0 10px 0;
zoom: 1; /* Corrige bug hasLayout do IE7/IE6 /*
}

Separar em blocos

/* SINGLE */
/* ----------------------------------------- */

#main-single {
width: 960px;
margin: 20px auto;
}

Catalogar seu css

/*
Nome do Projeto: import Zeh.Design
Descrição: Tema produzido para o blog import Zeh.Design
Versão: 1.0
Autor: José Henrique - http://www.importzehdesign.com/
*/

Sumarizar os blocos e os níveis que criou

/* Sumário:*/
/* -----------------------------------------

1 - Estilos Gerais
2 - Header
3 - Navegação
5 - Principal
5.1 - Tabulação
6 - Rodapé

*/

E tirar proveito para agilizar sua produção, colocando os valores das cores direto na sua folha de estilo. Estando sempre disponível para consulta.

/*
Cinza Escuro (texto): #242424
Laranja (headings, links) #e69900
Cinza Claro (categorias, rodapé) #666
*/

6 – Crie seu padrão

A organização de um código, é algo pessoal que varia de pessoa para pessoa, o importante é que ele seja compreensível para todos os que forem lê-lo. Atualmente tenho meu padrão de organização fixo, e uso em todos os meus CSS.

Modelo padrão de CSS do import Zeh.Design

Boas Praticas

1 – Use Reset

Esta é a principal forma de evitar as dores de cabeças das diferentes formas de renderizações dos browsers.

defaults

Valores Default dos browsers

Há varias técnicas distribuídas na web, a minha preferida é a utilizada pelo Elliot Jay Stocks, que se baseia na YUI Reset.

zeroed

Após a aplicação do Reset

2 – Crie seu HTML antes

A maioria dos web designers criam seu html em conjunto com o css, o que parecer ser lógico. Porém a partir do momento que você define todo o conteúdo(HTML) antes haverá maior facilidade para aplicar os estilos(CSS) começando do topo e usará menos classes do que imagina. Evitando assim declarações desnecessárias como:

<div id="header">
  <div class="bold">Heading</div>
</div>
<div id="subheader">
 <div class="bold">Segundo Heading</div>
</div>
<div>Conteúdo</div> 

Deveria ser solucionado desse modo:

<h1>Heading</h1>
<h2>Segundo Heading</h2>
<p>Conteúdo</p> 

Uma ótima técnica que funciona para mim, é imprimir o layout em uma folha, sentar na mesa e com o auxilio de uma régua e um lápis ir desenhando todas as div, criando seus nomes em uma folha de caderno separada.
Um bom jeito de dar um tempo da tela do computador e criar um código eficiente.

3 – Use múltiplas classes

Em conjunto com os estilos gerias, trabalhar com várias classes em um elemento é de grande ajuda. Um bom exemplo é quando você tem uma classe que precisa receber diferentes tipos de tamanhos:

<div class="box div530>Conteúdo</div>
<div class="box div300">Conteúdo</div>
Atenção: O ie6 tem um suporte falho a múltiplas classes, ele é incompleto.

4 – Estilos Gerais

Uma forma de poupar classes desnecessárias é definir estilos que servirão para várias situações. Como o alinhamento de textos, alinhamento de blocos, clears e etc…

.aligncenter {
display:block;
margin:0 auto
}
.alignleft { float:left }
.alignright { float:right }
.clear {clear:both}

5 – Estilize por nichos

Após ter definido os estilos gerais, as outras declarações recomendo ser feitas aproveitando o elemento principal do bloco, evitando dores de cabeça quando for reutilizar os elementos, principalmente o headings:

.single-post h2 {
font-size: 190%;
padding-bottom: 20px;
border-bottom: dashed 1px #999;
}

Atenção para não exagerar no caminho, apenas um ou dois elementos pais está de bom tamanho.

body #main-single #segunda .single-post h2 {
font-size: 190%;
padding-bottom: 20px;
border-bottom: dashed 1px #999;
}

7 – Explore as tags de html

Há varias outra tags do html que acabamos não usando por esquecermos e que podem ser utilizadas o invés de uma classe.

<small>07/10/2009</small>
<h2>Titulo da Máteria</h2>

Lista completa das tags suportadas pelo html.

9 – Seja Semântico

Validar o código CSS é importante, porém muitas propriedades do CSS3 que possui suporte na maioria dos navegadores, não é aceito na validação. Isso nos faz refletir se realmente a validação é tão importante assim.
É melhor focar em um código semântico e otimizado para o usuário.
Um interesssante relato foi escrito por Jeffrey Way, admistrador do site NETTUTS+.

10 – Nomeie e use classes e id corretamente

As id só podem ser usadas uma única vez em cada pagina, e é o mais específico dos elementos.
As classes simbolizam um grupo e podem ser usadas várias vezes. Deve se ter atenção para não usar as id apenas nos elementos principais footer, header, content possivelmente existem vários outros elementos dentro do layout que são únicos na pagina.

Outro fator importante é na hora de nominar suas classes e ids, deve-se usar a função do elemento em vez de sua aparência. Tornando semanticamente correta a reutilização dele e aumentando sua vida utíl.

/* Errado /*
.box-cinza { color:#CCC }

/*Certo /*
.box-enquete {color:#CCC }

11 – Margem negativa não é um vilão

O uso de margens negativas é sempre posto em contradição entre os desenvolvedores, alegando que é contra as regras da W3C. Mas, isto é, um grande boato. Não há nenhuma recomendação para o não uso delas pela W3C.

E como Dan Cederholm diz, com ela é possível obter certos resultados de maneira mais fácil e prática.

12 – Saiba usar elementos Inline e Block

Ao utilizar um elemento inline eles irão ocupar o espaço que for preciso. E os elementos block ocuparão o espaço inteiro da div pai. Em vez de ficar alterando o display das tags pelo CSS, saiba quais tags do html sao inline e block por padrão e utilize-as no local correto.

Inline:

span, a, strong, em, img, br, input, abbr, acronym 

Block:

div, h1,h2,h3,h4,h5.h6, p, ul, li, table, blockquote, pre, form 

14 – Utilize as propriedades do CSS.

Explore todos os recursos do CSS, use text-transformation para os textos, clip para recortar imagens, as propriedades do webkit e do moz para arredondar cantos, rotacionar elementos por exemplo. Propriedades que embelezam o site mas não comprometem a funcionalidade quando não forem suportadas por outros navegadores.

twitter-home

Uso de cantos arredondados com CSS na página principal do Twitter

Há duas leituras interessantes:
- Lista de nove propriedades que já são suportadas pelos browsers
- Propriedades do CSS que você nunca usou

Debug

Qualquer sistema de informação é preciso passar por rigorosos testes. Principalmente tratando de web algumas dicas são importantes:

1 – Instale o Firebug (Complemento Firefox)

firebug

Uma das melhores formas de debugar o código e achar possíveis erros de largura, padding extra ou posicionamento. Sem contar as boas ferramentas para analise de otimização do site e edição do css em tempo real.

2 – Teste enquanto desenvolve

Uma das formas de resolver rapidamente qualquer erro, é testar nos diferentes navegadores enquanto desenvolve. Você gastará mais tempo, porém evitará dores de cabeças futuras e hacks desnecessários para resolver as questões de incompatibilidade.

Otimização

1 – Diminua as requisições

Uma das ideias básicas ao desenvolver um site otimizado, é usar o menor número de requisições possíveis. Abusar das técnicas de CSS Sprite e usar o mínimo de folhas de estilo.

4 – Use link em vez de import

Além de obter um carregamento mais rápido você terá ele simultâneo usando várias tags links. O blog CSS no Lanche traduziu o artigo que comprovou este fato.


<link rel="stylesheet" type="text/css" href="css1.css">
<link rel="stylesheet" type="text/css" href="css2.css">

3 – Conheça seu publico e defina seu nível de otimização.

Tratando de otimização é preciso sempre ter em mente para qual público o site está sendo direcionado. Para um grande portal cada byte é importante no final das contas, porém para um site pequeno não é preciso perder tanto tempo procurando formas de diminuir seu código.
O mesmo vale para várias ou uma única folha de estilo. Se for possível é sempre bom optar por apenas uma, diminuindo as requisições, mas as vezes é um CSS grande que só será usado na home. Porque então não dividi-los em master, home e interna?

Diego Eis escreveu um exelente artigo “Não otimize seu código” para o site Tableless que ilustra estas situações

As dicas acima não estão em nenhuma ordem especial e a maioria é simplesmente o senso comum.


Gostou deste post?