Qual é o seu estilo css?

Um dos aspectos mais desconcertantes de trabalhar com CSS (Cascading Style Sheets) é que você pode escrever estilos de tantas maneiras. Semelhante a escrever prosa, só porque você compreender as regras básicas da gramática e ortografia não significa que você domina escrevendo prosa concisa.

designers de CSS experientes gastar um tempo considerável elaboração breve CSS, claro que é fácil de editar e atualizar. Mas aqueles que são novos para CSS são propensos a escrever mais estilos do que o necessário e para a criação de estilos redundantes.

Não só o código redundante levar mais tempo para fazer o download para um navegador web, é muito mais difícil de editar ou revisar mais tarde. E, o mais redundante seu código, o mais provável que você se deparar com conflitos de estilo.

Video: Começando com WordPress: Personalizando o Visual com CSS

Aqui estão cinco dicas para escrever estilos limpo, eficiente:

• Nunca criar dois estilos quando um é suficiente. Por exemplo, você pode criar um estilo usando o seletor de tags para todas as tags que muda a família de fontes de suas manchetes, e, em seguida, criar um segundo estilo usando um seletor de classe que você pode aplicar às suas manchetes para mudar a cor.

  Mas seria mais eficiente para definir tanto a cor e a família de fontes no mesmo estilo. Lembre-se que você sempre pode voltar e editar um estilo para adicionar outra regra, se você quiser alterar a formatação do estilo.

• Abreviar códigos de cores hexadecimais. Você pode definir cores em CSS, incluindo todo o código de cor hexadecimal. No entanto, quando você usa códigos de cores que são repetitivas, você precisa incluir apenas os três primeiros caracteres. Por exemplo #ffffff é o mesmo que #fff- ambos vão criar a cor branca.

• Use folhas de estilo externas. Você pode definir estilos em uma folha de estilo interna no topo de cada página web, ou você pode salvar seus estilos em um arquivo externo com a extensão .css e anexar essa folha de estilo para todas as suas páginas web. folhas de estilo externas são inerentemente mais eficientes porque eles permitem que você use o mesmo estilo ou em todas as páginas em seu site.

  
  
  
  

  Por exemplo, se você definir um estilo que faz com que todas as principais manchetes negrito, azul e grande, economizando esse estilo em uma folha de estilo externa permite que você use o mesmo estilo para cada manchete. Então, se você decidir mais tarde que você deseja alterar suas manchetes para verde, você pode mudar o estilo em uma folha de estilo externa e alterar todas as manchetes ao mesmo tempo.

  Se você salvou os estilos em uma folha de estilo interna, você teria que editar o estilo do título em cada arquivo.

• Desenvolver uma convenção de nomenclatura para os seus estilos. Embora você pode nomear estilos criados com a classe ou ID seletores de qualquer coisa que você gosta, é melhor escolher estilos que têm significado para além da formatação. Por exemplo, se você criar um estilo chamado .redHeadlines e depois decidir que quer todo o seu .redHeadlines para ser azul, você nem vai acabar com um estilo de título azul chamada .redHeadlines ou terá de mudar o nome do estilo.

  E renomeando o estilo inclui indo para trás e reaplicar esse estilo em todos os lugares que você tem uma manchete vermelho que deseja ficar azul, que tipo de nega o poder de estilos para fazer atualizações globais. Para evitar esse problema, crie nomes de estilo que se referem à posição ou importância de elementos, tais como .mainHeadlines ou .sidebarHeadlines.

• *Testar e validar seu código. Até mesmo os estilistas CSS experientes cometem erros, razão pela qual Dreamweaver inclui tantos grandes ferramentas para testar e validar o código em suas páginas web. Certifique-se de testar o seu CSS para erros comuns.

  Seguem-se dois serviços de testes on-line que você pode usar para verificar se há erros em seu código CSS. Basta digitar o URL de qualquer página da Web na Internet no campo de endereço em qualquer desses sites e clique no botão Enviar para receber um relatório mostrando todos os erros em seu código:

Video: [FAQ] Folha de estilo CSS

• o W3C CSS Validation Service

  Video: CURSO CSS - AULA 01 ( Estilo Interno e Externo - Estrutura)

• XHTML-CSS: Ser válida ou Die Aprendizagem

  Video: DevCast - Como manter seu CSS escalável com Compass, SMACSS, BEM e outros guias de estilos