Dicas para escrever CSS

0

Nem sempre é fácil programar com CSS. Dependendo do seu conhecimento e experiência, programar com CSS pode se ser uma dor de cabeça, especialmente se você não tem um sólido conhecimento de seletores. A criação de uma marcação semântica e adequada é o primeiro passo do desenvolvimento de uma CSS para tirar o máximo proveito de propriedades e atributos.

ball-63527_960_720

Hoje trazemos até você uma análise dos mais importantes e úteis dicas e truques, para codificação CSS e iremos mostrá-las nesse artigo. Acrescentamos também algumas técnicas simples que talvez você já conheça e até utilize nos seus projetos mas que por vezes, quando você necessita, não consegue encontrá-las facilmente.

O resultado disto foi um artigo mostrando como aumentar a eficiência do seu código CSS.

 

1.1. Tarefa: Iniciando

Comece com uma página em branco. Coloque nessa página o topo, a navegação, um conteúdo e um rodapé. Escreva a marcação HTML. A seguir crie sua CSS.

Limpe os estilos CSS . É possível eliminar a necessidade de particularizar um valor para certa propriedade, tendo em conta o valor padrão para a propriedade. Alguns desenvolvedores preferem colocar a zero os valores de margin e padding de todos os elementos logo no início da CSS Global white space reset.

Use uma folha de estilos mestre. Um dos enganos que os desenvolvedores mais cometem, quer sejam principiantes ou desenvolvedores de nível avançado é não remover a estilização padrão dos navegadores. A estilização padrão leva a diferenças no aspeto do design em vários navegadores. Ao codificar um website você deve antes de tudo, remover os estilos padrão do navegador.

Monte uma biblioteca de classes CSS. Isto você deve evitar isto na versão de lançamento do site, já que é permitido e válido usar várias classes

binary-1414317_960_720

1.2. Organize seu código CSS

Organize seu CSS utilizando folhas de estilo mestre. Organizar ajuda na manutenção do site. O melhor é começar com uma folha de estilos mestre. Dentro desta folha importe as folhas para remover estilos padrão reset.css, a folha global.cssflash.css (se for precisa), folha para estrutura do site structure.css e eventualmente uma folha para tipografia.

Organize sua CSS utilizando flags. Divida sua folha de estilos em divisões particulares, por exemplo: Topor, estilos global – (body, parágrafos, listas, etc), Estrutura da Página, estilos para Textos, Cabeçalhos, Formulários, Navigação, Comentários, Extras.

Escreva um índice para sua CSS. No início da sua CSS crie um índice dos conteúdos. Você pode por exemplo dar destaque para as diferentes áreas de estilização do seu documento (conteúdo principal, topo, navegação, rodapé, etc). Separe as áreas de estilização.

Ordene as propriedades por ordem alfabética.  Ordenar as propriedades por ordem alfabética facilita sua localização.”

Organize o código por seções. Esta é uma prática fácil de implementar e torna mais facil a leitura e manutenção do código até depois de passados anos que tenha sido escrito. Será mais simples encontrar elementos e classes que necessitam ser alterados.

Organize de acordo com o alvo do seletor . Depois de organizar sua CSS em seções divida os seletores nas seções tendo atenção ao posicionamento do alvo do seletor na marcação. Isto vai facilitar a manutenção e dará consistência às CSS.” [Ryan Parr]

Separe o código em blocos . Use três blocos de código. O primeiro bloco para declarações de estilo para elementos comuns em um documento Web, como por exemplo, links, body, alguns estilos para o topo, margens em formulários, declarações para zerar paddings e assim por diante. Depois vêm as declarações para as classes, tais como classes para enfatizar textos, aperfeiçoar mensagens de erro e colorir.

Se você achou nossas dicas úteis, compartilhe com seus amigos e comente abaixo outras dicas importantes que tornam a programação mais fácil.

Deixe uma resposta