Esta é a segunda parte do 5 Passos para Escrever Melhor CSS. Há uma abundância de tutoriais CSS estão disponíveis na internet, mas poucos são os tutoriais úteis. Neste tutorial, você vai encontrar 5 passos para escrever melhor código CSS para o seu próximo projeto do Web site. Eu espero que você aprecie este tutorial.

1. Mantenha declarações CSS em uma linha

você deve sempre manter declarações CSS em uma linha, ele ajuda a manter o seu CSS arquivo limpo e menores. Ela também ajuda a remover espaços e caracteres indesejados.

Código de Boas

  ; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;) 

Bad Code

 ; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;) 

2. Combine Elementos

Uma das melhores maneira de economizar linhas de código é agrupando seletores. Há alguns exemplos abaixo do que eu estou a referir.

Código de Boas

  H1, H2, H3 (
 ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333;
 ) 

Bad Code

  h1 (
 ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; 
 )
 h2 (
 ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333;
 )
 h3 (
 ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333;
 ) 

3. Use "margem" para o Centro Layout

Muitos novatos a CSS não consegue descobrir por que você não pode simplesmente usar float: left para conseguir esse efeito centrada em elementos de bloco. Se ao menos fosse assim tão fácil! Infelizmente, você precisa usar.

Código

  # Container (
 ; /* top, bottom - and left, right*/ margin: 0 auto; / * superior, inferior - e, esquerda, direita * /
 width: xxxpx;
 ) 

4. Comente o seu CSS

É uma ótima idéia para comentar o seu código em seções. Para adicionar um comentário, basta adicionar / * por trás do comentário, e * / para fechá-lo, assim:

Código

  /******** CODE START HERE ********/ 

5. Use CSS Compress Ferramentas

Se você não quer desperdiçar seu tempo na modificação de suas folhas de estilo antigo, você pode simplesmente usar o CSS em comprimir ferramentas, faça o seu trabalho em segundo.

verificar este css online comprimir ferramentas ...

CSS Tidy

Limpeza Css

CSS Optimizer

Flumpcakes otimizador Css

cssdrive Css Comperasor

W3C CSS Validator

Conclusão

Estas são apenas algumas das dicas que me ajudam a escrever melhor código. Espero que o tutorial também irá ajudá-lo a escrever melhor e mais limpo o código. Aplicar estas dicas para seus projetos atuais e no próximo, e você certamente irá apreciar os esforços.

Se você acha que tutorial pode ser mais melhor, por compartilhar conosco. Comentário nós

Se você gostaria de receber mais tutoriais de nós, por favor, considerem assinar a nossa feed de RSS ou por e-mail.

Arquivado em: Css, Tutoriais por admin