5 Steps kirjutama paremaid CSS II osa
See on teine osa 5 Steps kirjutama paremaid CSS. Seal on palju CSS tutorials on Internetis kättesaadavad, kuid mõned õpetused on kasulik. Sel juhendaja leiad 5 astet kirjutama paremaid CSS koodi oma järgmisel veebilehel projektiga. Loodan, et meeldib see tutorial.
1. Hoidke CSS deklaratsioonid ühele joonele
tuleks alati hoida CSS deklaratsioonid ühes reas, see aitab hoida teie CSS faili puhas ja väiksemad. See aitab ka eemaldada soovimatud tühikud ja märgid.
Hea Kood
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # CCCCCC;)
Bad Kood
h2 ( font-size: 18px; ; color: # 333333; ; background: # CCCCCC; )
2. Ühenda elemendid
Üks parim viis säästa rida koodi koondamine lülitid. Mõned näited allpool, mida mõtlen.
Hea Kood
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad Code
: Arial, Helvetica, sans-serif ; color : # 333 ; } h2 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h3 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h1 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h2 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h3 (font-family: Arial, Helvetica, sans-serif; color: # 333;)
3. Kasuta "marginaal" Center paigutus
Paljud algajad, et CSS ei suuda aru saada, miks sa ei saa lihtsalt kasutada float: center saavutada, et keskele mõju blokeerib tasandi elemente. Kui see ainult nii lihtne oleks! Kahjuks peate te kasutama.
Kood
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * ülalt, alt - ja vasakule, paremale * / laius: xxxpx; )
4. Kommentaar teie CSS
See on suurepärane idee kommenteerida koodi punktides. Kommentaari lisamiseks, lihtsalt lisada / * taga kommenteerida ja * / sulgeda, näiteks nii:
Kood
/******** KOOD Start Here ********/
5. Kasutage CSS Compress Tööriistad
kui sa ei taha raisata oma aega muutes oma vana stiili lehed võid kasutada lihtsalt online CSS suruma tööriistad, ta teeb oma tööd sekundit.
vaadata seda online CSS suruma tööriistad ...
Css Tidy
Puhas Css
Css optimeerija
Flumpcakes Css optimeerija
cssdrive Css Comperasor
W3C CSS-süntaksi
Järeldus
Need on vaid mõned nõuanded, mis aitavad mind kirjutama paremaid koodi. Loodan, et õpetamisel aitab ka kirjutada paremini ja puhas kood. Rakenda neid nõuandeid oma praeguse ja järgmise projekte ja te kindlasti hindame jõupingutusi.
Kui te arvate, et juhendaja saab olla parem, palun meiega jagada. Kommentaar meile
Kui soovite saada rohkem õpetused meilt, võtke arvesse tellides meie sööda RSS või e-posti.
Promote Us
Seotud artiklid:
Kui teile meeldis lugemine see artikkel, palun vaadake teisi seotud artikleid järgmiselt:
Revell ütleb: november 27, 2009 at 9:05 Said:
Tere,
Esiteks on kena artikkel! Ei ole nii palju artikleid, mis käsitlevad kirjutamise stiili CSS. Mul on mõned mõtted esimese punkti kuigi. Minu arvates on parem kasutada pika kirjutamise stiili arendades samal ajal ja on script "alahindama" teie CSS kasutades seda elada keskkonnas.
Dave ütleb: november 27, 2009 at 10:06 Said:
Olen täiesti nõus punkt 1. Kui sul on 3 deklaratsioonid, 1 rida koodi on tore, aga kui on 6 või 7, siis saab tõesti raske lugeda.
Kõik, mis päästa võibolla 1KB? Ma ei saa aru.
Muud kui ühe, mõned korralikud ideid.
Dave viimase blogi .. veel 2 must-olla CMS võimaldab plugins WordPress
Nicolo 'Fasce ütleb: november 27, 2009 at 10:34 Said:
Olen nõus, Dave, punkt 1 on vale, lihtsalt sest kui tööd meeskond on väga raske lugeda üks rida koodi.
Sa peaksid ka kirjutada koodi tähestikulises järjekorras samal eesmärgil.
EJ Semeijn ütleb: november 27, 2009 at 10:57 Said:
Miks lõpetada postitad need vihjed? Internet on juba täis neid põhitõdesid vihjeid. Ja Olen nõus ka # 1. Ta ei anna oma koodi on lihtsam mõista, see lihtsalt raskendab.
Minu nõuanded oleks panna lehe struktuur oma CSS teha osast RESET, pealkirjad, vormid, HTML ELEMENDID, fondid jne, mida teie CSS on lihtsam mõista.
safetycopy ütleb: november 27, 2009 at 9:38 Said:
Olen nõus mitmete teiste inimeste kommentaare - punkt 1 on näide halvast koodist ei halb kood - see on lihtsalt asendusliikme stiilis. See postitus oleks vaid kasulik täielik algaja ja me ei taha alustada õpetada neid halbu eeldusi juba!
safetycopy viimase blogi .. Photo
Josh ütleb: november 29, 2009 at 4:38 Said:
Ma kõiki neid, välja arvatud viimane. Ma ei pea seda vajalikuks tihendada minu css, kuid erinevalt kogu eelmise lugejatele Ma olen kindlalt nõus punkt # 1. I just alanud kirjalikult oma CSS ühele joonele ja see on olnud tohutu. Kerimine on palju vähendada. Ma arvan, et see on isiklik eelistus. Midagi, mis aitab on see, et toimetaja ma kasutan wrapid koodi alla reale, mistõttu ei ole horisontaalne kerimine.
Josh viimase blogi .. Sõltuvusse Flickr
FAQPAL ütleb: november 29, 2009 at 4:06 Said:
Hea algajale näpunäiteid, ma ei alahindama oma CSS kas ehk palju suuremast projektist kasu minifying, kuid keskmine sait ei ole tegelikult vaja.
Kuivõrd # 1 läheb, ma arvan, et sõnastus, mis on viskamine inimesed ära, selle asemel, öeldes: "Bad kood", võib-olla peaks ütlema, nagu safetycopy on soovitanud, "Alternatiivne kood".
FAQPAL viimase blogi .. Bubble toimet CSS
favSHARE ütleb: november 30, 2009 at 12:49 Said:
See artikkel on jagatud kohta favSHARE.net. Mine ja hääletus see!
favSHARE viimase blogi .. 25 Web Layout Juhendid