5 pasos para Escribir Mellor Parte II CSS
Esta é a segunda parte do 5 pasos para Escribir Mellor CSS. Hai unha abundancia de tutoriais CSS están dispoñibles na Internet, pero poucos son os tutoriais útiles. Neste tutorial, vai atopar 5 pasos para escribir mellor código CSS para o seu próximo proxecto do sitio web. Eu espero que apreciar este tutorial.
1. Manteña declaracións CSS nunha liña
ten que sempre manter declaracións CSS nunha liña, el axuda a manter o seu CSS arquivo limpo e menores. Ela tamén axuda a eliminar espazos e caracteres indesejados.
Código de Boas
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # ÇÇÇÇÇÇ;)
Bad Code
h2 ( font-size: 18px; ; color: # 333333; ; background: # ÇÇÇÇÇÇ; )
2. Combina Elementos
Unha das mellores forma de aforrar liñas de código agrupando seletores. Hai algúns exemplos por baixo 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 "marxe" para o Centro Layout
Moitos novatos a CSS non pode por que non pode simplemente usar float: left para conseguir este efecto centrada en elementos de bloque. Se polo menos fose tan sinxelo! Desafortunadamente, ten que empregar.
Código
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * superior, inferior - e, esquerda, dereita * / width: xxxpx; )
4. Comentar o seu CSS
É unha gran idea para comentar o seu código en seco. Para engadir un comentario, simplemente engadir / * detrás do comentario, e * / a pecha-lo, así:
Código
/******** CODE START HERE ********/
5. Use CSS Compress Caixa de ferramentas
Se non queres desperdiçar seu tempo na modificación das súas follas de estilo antigo, pode simplemente usar CSS en comprimir ferramentas, faga o seu traballo en segundo.
comprobar este css online comprimir ferramentas ...
CSS Tidy
Limpeza Css
CSS Optimizar
Flumpcakes óptimo Css
cssdrive Css Comperasor
W3C CSS Validator
Conclusión
Estas son só algunhas das suxestións que me axudan a escribir mellor código. Espero que o tutorial tamén pode axudar a escribir mellor e máis limpo o código. Aplicar estas suxestións para os seus proxectos actuais e no seguinte, e certamente pode apreciar os esforzos.
Se pensas que titorial pode ser máis mellor, por compartir connosco. Comentario nós
Se desexa recibir máis tutoriais de nós, por favor, consideren asinar a nosa feed de RSS ou por e-mail.
Promover connosco
Artigos relacionados:
Se lle gusta de ler este artigo, confía outros artigos relacionados a continuación:
Revell dixo en: 27 de novembro, 2009 at 9:05 am Said:
Ola,
Primeiro de todo artigo, nice! Non hai moitos artigos que abordan o estilo de escritura de CSS. Eu teño algúns pensamentos sobre o primeiro punto aínda. Na miña opinión, é mellor usar o estilo de escritura longo tempo en desenvolvemento e ten un script "apoucar" seu CSS cando usalo en un entorno vivo.
Dave dixo en: 27 de novembro de 2009 ás 10:06 Said:
Eu Discordo completamente do punto 1. Cando ten 3 declaracións, 1 liña de código é grande, pero cando hai 6 ou 7 anos, está realmente difícil de ler.
Todo iso para salvar quizais 1KB? I don't get it.
A excepción de que, algunhas ideas decente aquí.
Dave's last blog .. máis 2 debe ter-CMS permitindo plugins para WordPress
Fasce Nicole 'di en: 27 de novembro de 2009 ás 10:34 Said:
Concordo con Dave, o punto 1 está mal, simplemente porque se traballar en un equipo que é moi difícil ler un código dunha liña.
Tamén debe escribir o código en orde alfabética para a mesma finalidade.
EJ Semeijn dixo en: 27 de novembro de 2009 ás 10:57 Said:
Por que necesitamos deixar de escribir estas suxestións? Internet xa está chea destas suxestións básicas. E eu tamén estou de acordo co número 1. Non fai o seu código máis doado de entender, el só fai que sexa máis difícil.
As miñas suxestións sería poñer a estrutura de páxina no seu CSS, facer cortes para Reset, posicións, formas, elementos HTML, tipos de letra etc Desta forma o seu CSS vai ser máis doado de entender.
safetycopy dixo en: 27 de novembro de 2009 ás 9:38 pm Disse:
Concordo con varios comentarios de outros usuarios - punto 1 do mal exemplo de código é o código non é malo - é só un estilo alternativo. Este post só sería útil para completar principiantes e non queremos comezar a ensinar os presupostos mal xa!
safetycopy último blog's .. Photo
Josh dixo en: 29 de novembro, 2009 at 4:38 am Said:
Fago todo iso, excepto a última. Eu non creo que sería útil para comprimir o meu css, pero a diferenza de todos os lectores anterior, eu estou de acordo no punto número 1. Eu só comecei a escribir meu CSS nunha liña e ten sido enorme. A rolagem ten sido moi reducida. Coido que esa é unha preferencia persoal. Algo que axuda é que o editor que uso rompe o código establece a seguinte liña que non hai rolagem horizontal.
Último blog de Josh .. Addicted to Flickr
FAQPAL dixo en: 29 de novembro, 2009 at 4:06 pm Said:
Consellos novato Bo, eu non apoucar meu CSS ou, quizais, un proxecto moito maior beneficiaria minifying, pero o sitio media realmente non precisa.
No que se refire # 1 vai, eu creo que o texto é o que está botando a xente, en vez de dicir, "Bad Code", quizais debese dicir como safetycopy suxeriu, Alternativo "Código".
FAQPAL último blog's .. burbulla efecto CSS
FavShare dixo en: 30 de novembro de 2009 ás 12:49 Said:
Este artigo foi compartida en favSHARE.net. Vaia vota it!
FavShare último blog's .. 25 Tutorials Web Layout
Jean-Patrick Smith dixo en: 11 de decembro de 2009 ás 11:15 Said:
Eu costume crear un arquivo PHP que inclúe todos os meus arquivos css, minifies, e engade compresión + expira cabeceiras.
Dese xeito, eu non teño que de acordo co punto número 1 ...
O que é máis importante que ter todos os seus CSS nunha liña é reducir o número de chamadas HTTP con sprites CSS e combinando os seus CSS / JS nun arquivo.