CSS – Melhores Práticas

Tutorial Anterior Da Série Aprende CSS Com Maicon Sobczak > Especial! CSS3 – Layout

Melhores práticas na utilização de uma linguagem.. Bem, em última instância, a melhor prática é a que melhor funciona para cada um.

Mas vou sair um pouco dos extremos para apresentar algumas práticas na criação de folhas de estilo que são unanimidade entre os web designers. Também farei algumas observações a respeito de outras que dividem opiniões.

E qual a importância de padronizar a forma como são escritas as regras CSS? Para ficar nas duas principais: menor peso do arquivo e facilidade na manutenção.

É importante ressaltar que não importa a versão do CSS, o ganho será o mesmo.

Framework

Inicio já com uma questão polêmica. Os frameworks CSS. A proposta é agilizar o desenvolvimento resolvendo as discrepâncias entre os navegadores, criando classes genéricas e arquivos para mídias específicas. Tem até módulos para estilizar formulários e cuidar da tipografia.

Frameworks de outras linguagens já provaram que vale a pena utilizá-los. Dizem que você não precisa reinventar a roda. O conselho é de que você somente comece a usar quando dominar completamente o CSS para que saiba o porque de determinadas regras e com isso possa aumentar realmente a produtividade.

Resetar Os Valores

Assim como em uma guerra, quem sofre mesmo não são as partes que lutam, mas quem esta entre eles, os civis, na guerra dos browsers, os maiores prejudicados são os desenvolvedores.

Apesar de caminharmos para uma padronização ainda existem muitas versões dos navegadores no mercado e cada uma possui um valor padrão diferente para um mesmo elemento.

Para evitar dores de cabeça, a solução é resetar os valores padrões. Existem diversas abordagens, algumas tentam englobar todos os elementos, outras fazem somente o básico. Testando você encontrará uma que melhor se encaixe à sua forma de desenvolver.

O exemplo abaixo é um dos mais conhecidos e foi desenvolvido por Eric Meyer (http://meyerweb.com/eric/tools/css/reset/index.html).

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

  font-size: 100%;

  vertical-align: baseline;

  background: transparent;

}

body {

  line-height: 1;

}

ol, ul {

  list-style: none;

}

blockquote, q {

  quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}



/* remember to define focus styles! */

:focus {

  outline: 0;

}



/* remember to highlight inserts somehow! */

ins {

  text-decoration: none;

}

del {

  text-decoration: line-through;

}



/* tables still need 'cellspacing="0"' in the markup */

table {

  border-collapse: collapse;

  border-spacing: 0;

}

Ordem

Crie uma ordem para declarar as regras. Seja alfabética ou de estrutura. O importante é que se você precisar alterar o código daqui um ano, você rapidamente encontre a regra a ser modificada.

Eu por exemplo, divido as regras para divs, textos, formulários, links, listas e classes genéricas. Em seguida as classes e elementos são organizados por ordem alfabética. Tudo deve ser comentado.

Tenha cuidado com o efeito cascata e a especificidade. Regra declarada por último ou mais específica tem predominância.

Nomenclatura

O nome das classes deve seguir uma nomenclatura padronizada que facilite a leitura. Lembre-se que você pode reutilizar partes de um código CSS em outros projetos ou precisar voltar para manutenção.

Ao invés de underline ( _ ) em nomes compostos, use traço ( – ). Escreva tudo em minúsculas e não comece o nome das classes com números.

Evite utilizar ids. Deixe-as para manipulação com javascript.

Agrupar seletores

Quando diversos elementos possuem o mesmo valor para uma propriedade, ao invés de escrevê-la diversas vezes, agrupe os seletores em torno dela.

Um uso comum é com divs. Diversas precisam ser posicionadas à esquerda do conteúdo. Então ao invés de escrever repetidamente “position:relative; float:left;” você agrupa os seletores:

.menu-div, .conteudo-esq {position:relative; float:left}

Combinar Propriedades

Algumas propriedades podem ser agrupadas em uma única declaração. Um exemplo é a borda. É possível estilizar a grossura, o tipo e a cor. Uma declaração comum é:

.caixa{ 

border-width:3px; 

border-style:dotted;

border-color:#000;}

Mesmo que seja posto tudo em uma linha, ainda existem declarações desnecessárias. Acostume-se a escrever assim:

.caixa{border: 3px dotted #000;}

A leitura das declarações será facilitada.

Dentre as propriedades que podemos utilizar as abreviações esta á font, margin e padding. Contudo, é necessário seguir regras nas declarações. Na margin e padding você precisa declarar os valores em sentido horário, topo, direita, base e esquerda. Se mesmo assim não lembrar da ordem tente “TRouBLEd”, em inglês Top, Right, Bottom, LEft.

Classes Genéricas

Muitas vezes você precisa definir apenas uma propriedade para o elemento. Digamos uma imagem que precisa ser flutuada à esquerda do texto. Ao invés de criar uma classe específica para aquela imagem, utilize um nome genérico e intuitivo que possa ser usado em outros elementos.

Ao invés de :

.imagemtexto{float:left;}

Escreva:

.esquerda{float:left;} // ou .left

Assim, se você precisar flutuar uma div à esquerda e que tenha borda, vai precisar apenas declarar a borda economizando código.

<div class=”left borda1”></div>

Utilize com parcimônia, pois caso contrário ao invés de enxugar o código você terá uma extensa lista de simples declarações. Reserve apenas para declarações mais comuns.

Menos Classes

Antes de criar uma classe, analise outras possibilidades. Veja se é possível aproveitar um elemento HTML, a descendência, valor dos atributos ou se já não existe outra classe com a mesma declaração.

<div class=”texto”>



<p>Lorem ipsum amet <img src=”imagem.jpg” alt=”imagem”></p>



</div>

Para adicionar uma borda à imagem acima, ao invés de criar uma classe para ela, vamos aproveitar a descendência:

.texto img{border:1px solid #000;}

/* ou */

img[alt=imagem]{border: 1px solid #000;}

O código HTML fica limpo, assim como o arquivo da folha de estilo.

Saber a diferença entre elementos nível de bloco e inline ajuda a evitar a criação de divs desnecessárias. O elemento ul utilizado na criação de listas desordenadas, comuns na estruturação dos menus é um elemento nível de bloco. Então não precisa criar uma div somente para posicionar o menu.

Mínimo De Hacks E Nada De Behavior E Filter

A quase totalidade dos hacks necessários é para minimizar as diferenças em relação ao IE6-7. O velhinho ali já esta caindo fora, mas os hacks estarão por aí por um longo tempo ainda. Isso porque não existe cuidado na programação.

Entender como os navegadores interpretam as regras CSS ajuda a evitar inconsistência na apresentação do conteúdo entre eles.

O Internet Explorer disponibiliza a interpretação dos behaviors e filters inseridos nas folhas de estilo. São basicamente códigos javascript para gerar alguns efeitos. E por isso mesmo não deve estar em um arquivo CSS. Javascript é para arquivo javascript!

Medidas

Existe muito debate em torno de qual medida é a melhor para definir o tamanho dos textos. Enquanto o pixel depende da resolução do monitor, o em é relativo ao documento.

Para usar em você precisa entender a relação entre os elementos. Enquanto o pixel é bastante depende da resolução.

A dica é conhecer a audiência do website. Acessam através do computador ou celular? Preferem textos grandes ou um tamanho menor esta ok?

Acessibilidade

Existem tantos dispositivos e navegadores para acessar o conteúdo online que não há como garantir que todos conseguirão ver a mesma formatação da página. Mesmo assim devemos deixar o conteúdo apresentável em todas.

Com o CSS3 ainda sendo implementado é imprudência formatar um elemento utilizando somente as declarações desta versão.

Existe uma vertente de desenvolvedores que diz para você desenvolver testando antes nos navegadores atuais e depois nas versões anteriores. Fazendo o graceful degradation. Outra postula que é prioritário garantir o funcionamento nos navegadores antigos e só depois partir para recursos mais sofisticados visíveis apenas nos browsers atuais. São do progressive enhancement.

Tendo em vista que o usuário médio demora muito para atualizar o navegador e existe tanto IE6 por aí, é mais sensato pensar como os últimos. Em suma, o website não deve depender da versão do navegador para funcionar 100%. A funcionalidade vem antes da aparência.

Index Da > Série Aprende CSS Com Maicon Sobczak