5 Passos a escriure millor CSS Part II
Aquesta és la segona part de 5 passos per escriure millor CSS. Hi ha un munt de tutorials de CSS estan disponibles a Internet, però pocs són els tutorials útils. En aquest tutorial es troba 5 passos per escriure millor codi CSS per al seu projecte de pàgina web següent. Espero que gaudeixin d'aquest tutorial.
1. Mantenir les declaracions CSS en una línia
Es recomana mantenir sempre les declaracions CSS en una sola línia, que ajuda a mantenir el teu arxiu CSS net i més petits. També ajuda a treure els espais no desitjats i els personatges.
Codi de bones
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333.333; background: # CCCCCC;)
Bad Codi
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333.333; background: # CCCCCC;)
2. Els elements es combinen
Una de la millor manera d'estalviar línies de codi és mitjançant l'agrupació de selectors. Hi ha alguns exemples a continuació del que em refereixo.
Codi de bones
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad Codi
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 "marge" del recinte de Disseny de
Molts nouvinguts a CSS no pot entendre per què no es pot simplement utilitzar float: center per aconseguir aquest efecte es va centrar en elements de bloc. Si només fos tan fàcil! Lamentablement, hauràs d'utilitzar.
Codi
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * amunt, avall - i l'esquerra, dreta * / width: xxxpx; )
4. Comentari teu CSS
És una gran idea per comentar el seu codi en seccions. Per afegir un comentari, simplement afegir / * darrere del comentari, i * / per a tancar-lo, així:
Codi
/******** Codi d'inici AQUÍ ********/
5. Utilitza CSS Comprimeix Eines
si no volen perdre el seu temps en la modificació de les seves fulles d'estil antic pot simplement utilitzar CSS en línia comprimir eines, que fan la seva feina en segons.
comprovar aquesta css línia comprimir eines ...
CSS Tidy
Neteja Css
Optimitzador de CSS
Flumpcakes Optimitzador de Css
cssdrive Css Comperasor
W3C CSS Validator
Conclusió
Aquests són només alguns dels consells que em ajuden a escriure millor codi. Espero que el tutorial també l'ajudarà a escriure millor i netejar el codi. Apliqueu aquests consells per als seus projectes en curs i el proper, i segurament apreciaran l'esforç.
Si vostè pensa que tutorial pot ser més millor, si us plau comparteixi amb nosaltres. Comenta'ns
Si vol rebre més tutorials de nosaltres, si us plau considera subscriure't al nostre feed de RSS o per correu electrònic.
Promoure Us
Articles relacionats:
Si heu gaudit llegint aquest article, si us plau, fes un cop d'ull a altres articles relacionats a continuació:
Revell, diu el: 27 novembre 2009 a les 9:05 Said:
Hola,
En primer lloc, l'article nice! No hi ha molts articles que tracten l'estil d'escriptura de CSS. Tinc algunes idees sobre el primer punt però. En la meva opinió és millor utilitzar l'estil d'escriptura molt de temps en desenvolupament i tenen una seqüència de comandaments "minimitzar les" el teu CSS quan l'utilitzi en un entorn real.
Dave diu el: 27 novembre 2009 a les 10:06 Said:
Estic totalment d'acord amb el punt 1. Quan tens 3 declaracions, 1 línia de codi és gran, però quan hi ha 6 o 7, es torna realment difícil de llegir.
Tot això per salvar a aquest 1KB? Jo no ho entenc.
A part que un, algunes idees decent aquí.
Passat del bloc de Dave .. 2 més must-have de CMS que permet plugins per a WordPress
Fasce Nicolo ', diu el: 27 novembre 2009 a les 10:34 Said:
Estic d'acord amb Dave, el punt 1 està malament, simplement perquè si vostè treballa en un equip que és molt difícil de llegir un codi de línia.
Vostè també ha d'escriure el codi en ordre alfabètic per al mateix propòsit.
EJ Semeijn diu el: 27 novembre 2009 a les 10:57 Said:
Per què deixar de publicar aquests consells? Internet està ple d'aquests consells bàsics. I també està d'acord amb # 1. No té el seu codi més fàcil d'entendre, simplement fa més difícil.
Els meus consells seria posar l'estructura de la pàgina a la teva CSS, fer seccions per al reajustament, les partides, les formes, els elements HTML, fonts, etc D'aquesta manera el teu CSS serà més fàcil d'entendre.
safetycopy diu el: 27 novembre 2009 a les 9:38 pm Said:
Estic d'acord amb diversos comentaris d'altres persones - el punt 1 de l'exemple de codi dolent és el codi no està malament - és només un estil alternatiu. Aquest anunci només seria útil per a completar novells i no volem començar a ensenyar als supòsits dolents ja!
últim bloc safetycopy's .. Photo
Josh diu el: 29 novembre 2009 a les 4:38 Said:
Faig tots aquests excepte l'últim. No em sembla que és útil per comprimir el meu CSS, però a diferència de tots els lectors anteriors Estic molt d'acord en el punt # 1. Acabo de començar a escriure el meu CSS en una línia i ha estat terrible. El desplaçament ha estat molt menor. Suposo que això és una preferència personal. Una cosa que ajuda és que l'editor que faig servir envolta el codi fins a la següent línia del que no hi ha desplaçament horitzontal.
Passat del bloc de Josh .. Addicted to Flickr
FAQPAL diu el: 29 novembre 2009 a les 4:06 pm Said:
Consells per a principiants Bé, jo no minimitzar les CSS meu tampoc, potser un projecte molt més gran es beneficiarien d'minifying, però el lloc mitjà no necessita realment.
Pel que fa a # 1, penso que la redacció és el que està fent la gent, en lloc de dir, "Bad Codi", potser hauria de dir com safetycopy ha suggerit, "Alternate Codi".
Últim bloc FAQPAL's .. efecte de les bombolles amb CSS
favshare diu el: 30 novembre 2009 a 12:49 am Said:
Aquest article ha estat compartit en favSHARE.net. Anar a votar ia!
últim bloc favshare's .. 25 Tutorials Disseny Web
Jean-Patrick Smith, diu el: 11 desembre 2009 a les 11:15 Said:
En general crear un arxiu PHP que inclou tots els fitxers CSS, minifies, i afegeix la compressió + expira capçaleres.
D'aquesta manera no han d'estar d'acord amb el punt # 1 ...
El que és més important que tenir totes les teves CSS en una sola línia és reduir el nombre de trucades HTTP amb els sprites CSS i combinar totes les seves CSS / JS en un arxiu.