quarta-feira, 22 de maio de 2013

CSS guia de boas práticas

CSS (Cascading Style Sheets) é uma linguagem de estilo para representar/modificar a apresentação de alguma informação como dados HTML, XML, esse tópico aborda uma lista de boas práticas na hora de programar!

Para que CSS?


Praticamente todos os sites usam e abusam desse poderoso recurso para melhorar a qualidade visual das informações apresentadas como por exemplo:

  • Tamanho da fonte

  • Bordas arrendondadas

  • Efeitos especiais (integrados com javascript)

  • E muitas outras coisas

Uma das grandes vantagens do CSS é a sua propriedade de ser escrito fora do código html, dessa maneira a página hml (php, asp, jsp, htm, html) conterá apenas os seu conteúdo e uma outra página, css, irá conter as informações de estilo referentes a html.

Lista de boas práticas para CSS


Crie seu HTML primeiro


Muitos programadores acham que criar o CSS e o HTML ao mesmo tempo agiliza o processo, porém você economiza muito mais tempo segmentando as tarefas.

Após criar o seu rascunho no HTML fica muito mais fácil desenvolver o css, dessa maneira você consegue desenhar melhor sem se preocupar com o códigos ou tags.

Escreva seu código de maneira legível


Organize a maneira como você escreve seu código para que o mesmo se torne mais fácil de visualizar e editar:

- Errado
body {backgroud-color:#000; font-size:2em;} h1{color:#aa1;} .site{margin:auto;}

- Certo
body {
  backgroud-color:#000; 
  font-size: 2em;
 } 

h1 {
  color:#aa1;
 } 
.site{
  margin:auto;
 }

Organize-se de maneira lógica


Utilize ordem alfabética para as propriedades de seus elementos, procure utilizar palavras coerentes ao elemento para facilitar o entendimento do que se trata e segmente em 3 partes as propriedades da sua folha de estilos:

- Cabeçalho (propriedades referentes ao topo) - Meio (propriedades referentes ao conteúdo)
- Rodapé (propriedades referentes ao rodapé)

Combine elementos


Alguns elementos de uma folha de estilos compartilham das mesmas propriedades, ao invés de ficar criando várias entradas no seu código css, combine-os!
<div class="caixa corAzul">RagazziD</div>

O espaço entre o código diz que a div irá receber as propriedades dos dois elementos mencionados (a ordem não importa)

Comente no seu código


Sempre use comentários no seu código CSS, além de facilitar o entendimento do mesmo durante a programação eles o ajudaram a resolver vários problemas!

Saiba a diferença entre elementos Inline e elementos de quebra de linha


Os elementos ou tags inline são aquelas que não quebram a linha quando você as usa, por outro lado os elementos de quebra de linha irão pular uma linha, obrigatoriamente da maneira correta:

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

- Quebra de Linha
div, h1...h6, p, ul, li, table, blockquote, pre, form

Centralize seus elementos da maneira correta


Use margin:auto ou alguma propriedade de margin para centralizar seus elementos, usar align pode lhe dar muitas dores de cabeça.

Não crie divs para tudo


Nem todas as propriedades precisam de DIVs, criar muitas delas acabam aumentando o tamanho do seu código de maneira inútil, pense bem antes de sair criando várias divs pois isso pode até mesmo facilitar o seu trabalho

- Errado
<div class="cabecalho"><h1>Bem vindo ao RagazziD</h1></div>

- Certo
<h1>Bem vindo ao RagazziD</h1>

ps. mas existem casos em que elas são extremamente necessários, use o bom senso!

Não esconda seus textos


Muitos programadores preferem usar imagens ao invés de texto para os títulos, mas como uma ferramente de busca (google, bing, yahoo) não leem imagens, fica difícil identificar o que o texto quer dizer.

Uma das técnicas usadas é criar uma div invisível com o mesmo texto da imagem, mas isso acaba piorando as coisas para os buscadores. A melhor maneira de dizer a uma ferramenta de busca sobre uma imagem é usar a lag ALT.

Fonte da informação acima: http://www.youtube.com/watch?v=fBLvn_WkDJ4&feature=player_embedded (Um funcionário da Google falando sobre isso)

Adicione margins e paddings a tudo!


Diferentes navegadores renderizam o conteúdo das páginas da internet de maneiras diferentes e uma das suas principais diferenças está no tratamento do espaçamento entre os caracteres, imagens e espaçamento de linhas.

Sempre especifique extamente qual deve ser o espaçamento para minimizar esse problema.

Utilize Frameworks


Criar um CSS do zero pode acabar sendo perda de tempo, dependendo da complexidade do mesmo, em muitos casos o uso de ferramentas prontas pode agiliar o processo.
Não é uma questão de reinventar a roda, mas sim uma questão de entender como ela funciona!

Frameworks são um conjunto de códigos pré modelados para servirem de base para algum projeto, no caso de css é um conjunto de css que já lhe dá várias propriedades para elementos, dessa maneira não há necessidade de criar tudo do zero, basta editar o que já existe conforme a sua necessidade.

Como dica:
BluePrint Framework
- http://www.blueprintcss.org/

Nenhum comentário:

Postar um comentário