Qual é o seu estilo CSS? - dummies

Um dos aspectos mais confusos de trabalhar com CSS (Cascading Style Sheets) é que você pode escrever estilos de muitas maneiras. Semelhante à escrita de prosa, só porque você entende as regras básicas de gramática e ortografia não significa que você tenha dominado a escrita de prosa concisa.

Os designers CSS experientes passam um tempo considerável criando um CSS breve e claro que é fácil de editar e atualizar. Mas aqueles que são novos no CSS são propensos a escrever mais estilos do que o necessário e a criar estilos redundantes.

Não só o código redundante leva mais tempo para baixar para um navegador da Web, é muito mais difícil editar ou revisar mais tarde. E, quanto mais redundante seu código, mais provável é que você enfrente conflitos de estilo.

Aqui estão cinco dicas para escrever estilos limpos e eficientes:

• Nunca crie dois estilos quando um for suficiente. Por exemplo, você pode criar um estilo usando o seletor de tags para todas as tags

  que altera a família de fontes de suas manchetes e, em seguida, crie um segundo estilo usando um seletor de classe que você possa aplicar às manchetes para mudar o título cor.

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

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

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

  Por exemplo, se você definir um estilo que faça todas as principais manchetes em negrito, azul e grande, salvar esse estilo em uma folha de estilo externa permite que você use o mesmo estilo para cada título. Então, se você decidir mais tarde que deseja mudar suas manchetes para o verde, você pode mudar o estilo em uma folha de estilo externa e mudar 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.

• Desenvolva uma convenção de nomenclatura para seus estilos. Embora você possa nomear os estilos criados com os seletores de classe ou ID do que quiser, é melhor escolher estilos que tenham significado além da formatação.Por exemplo, se você criar um estilo chamado. RedHeadlines e, mais tarde, você deseja que você deseje todos os seus. RedHeadlines para ser azul, você acabará com um estilo de título azul chamado. RedHeadlines ou terá que renomear o estilo.

  E renomear o estilo inclui voltar e reaplicar esse estilo em todos os lugares, você tem uma manchete vermelha que deseja se tornar azul, o qual é o tipo de negar o poder dos 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.

• * Teste e valide seu código. Mesmo os designers de CSS experientes cometem erros, e é por isso que o Dreamweaver inclui tantas ferramentas excelentes para testar e validar o código em suas páginas da web. Certifique-se de testar seu CSS para erros comuns.

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

  • O Serviço de Validação CSS do W3C

  • XHTML-CSS : Seja válido ou morra