5 Steps to Write Better CSS II dio
Ovo je drugi dio od 5 Steps to Write Better CSS. Ima mnogo CSS tutoriali su dostupni na internetu, ali malo tutoriali su korisne. In this tutorial ćete naći 5 koraka za napisati bolji css kod za Vašu web sljedeći projekt. Nadam se da ćete uživati ovaj udžbenik.
1. Držite CSS izjave u jednom retku
uvijek biste trebali držati CSS izjava u jednom retku, pomaže u održavanju svog CSS datoteke čistim i manje. Internet isto tako pomoć to maknuti neželjen razmake i znakova.
Dobro Šifra
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Bad Šifra
H2 ( font-size: 18px; ; color: # 333333; ; background: # cccccc; )
2. Kombinirajte Elementi
Jedan od najboljih načina da spasi linija koda je mimo grupiranje selektora. Postoje neke primjere u nastavku onoga što mislim da.
Dobro Šifra
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad Šifra
: 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. Koristite "Margin" u Centar Raspored
Mnogi početnici do CSS Ne mogu shvatiti zašto se ne može jednostavno koristiti float: centar kako bi se postigla taj učinak usmjeren na blok-razini elemenata. Kad bi samo to bilo tako jednostavno! Nažalost, morat ćete koristiti.
Šifra
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * vrh, dno - i lijevo, desno * / width: xxxpx; )
4. Komentar vaš CSS
To je sjajna ideja da komentira svoj kod u dijelove. Da bi dodali komentar, jednostavno dodati / * iza komentar, i * / ga zatvoriti, kao što su na taj način:
Šifra
/******** CODE START HERE ********/
5. Koristite CSS Komprimiranje Alati
ako ne želite gubiti vrijeme u modificiranju svoj stari stil listova možete jednostavno koristiti online css stisnuti alate, to bi vaš rad u sekundi.
check this online css oblog alati ...
Css Tidy
Clean Css
Css Optimizer
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C CSS Validator
Zaključak
To su samo neki od savjeta koji mi pomažu da bolje napisati kod. Nadam se da udžbenik također će vam pomoći da bolje pisati i čist kod. Primijeni ove savjete za Vaše trenutne i slijedeće projekte, a sigurno ćete cijeniti napore.
Ako mislite da udžbenik može biti još bolje, Molimo Vas da podijelite s nama. Komentar nas
ako želite dobiti više tutoriali od nas, molimo vas da razmislite o Prijavom na naš feed RSS ili putem e-pošte.
Promote Us
Vezani članci:
Ako ste uživali čitajući ovaj članak, molimo vas da provjerite drugih srodnih članaka u nastavku:
Revell kaže on: 27 studeni, 2009 at 9:05 Said:
Bok,
Prije svega, lijep članak! Ne postoje mnoge članke u kojima je adresa stil pisanja i CSS. Imam neke misli na prvo mjesto ipak. Po mom mišljenju bolje je koristiti dugo stil pisanja, dok su u razvoju i original "umanjiti" vaš CSS kod korištenja na live okoliš.
Dave kaže on: 27 studeni, 2009 at 1006: am Said:
Ja u potpunosti slažete s točke 1. Kada je dobio 3 deklaracije, 1 linija koda je velik, ali kad ima 6 ili 7, postane doista teško čitati.
Sve što se spasiti možda 1kb? JA dont 'dobiti Internet.
Drugom osim taj jedan, neke pristojne ideje ovdje.
Dave's last blog .. 2 više morati-imati CMS omogućava čep za WordPress
Nicolo 'Fasce kaže on: 27 studeni 2009 at 10:34 Said:
Slažem se sa Dave, točka 1 je u redu, jednostavno jer ako rade na tim je jako teško čitati jednu liniju koda.
Također biste trebali pisati kod abecednim redom za istu svrhu.
EJ Semeijn kaže on: 27 studeni, 2009 at 1057: am Said:
Zašto nam je stanice postavljanja ovih savjeta? Internet je već pun tih osnova savjeta. I ja sam isto tako se ne slažete sa # 1.. To ne bi Vaš kod lakše razumjeti, nego se samo čini teže.
Moj savjeta bio bi staviti stranicu strukture u CSS, napravite sekcije za RESET, zaglavlja, OBLICI, HTML elemente, fontove itd. Na taj način vaš CSS će biti lakše razumjeti.
safetycopy kaže on: 27 studeni, 2009 at 938: pm Said:
Slažem se s nekoliko drugih ljudi, komentirajte - točke 1. primjer lošeg koda nije loše kod - to je samo alternativni stil. Ovaj post bi samo biti korisne za završetak newbies, a mi ne želimo da im nastava započeti loše pretpostavke već!
safetycopy's last blog .. Foto
Josh kaže on: 29 studeni, 2009 at 438: am Said:
Činim sve ove osim posljednje. Ne smatram ga korisnim za moj css stisnuti, ali za razliku od svih prethodnih čitatelja sam jako složiti na # 1 bod. Upravo sam počeo pisati moje CSS u jednu liniju i to je bio ogroman. Pomicanje je daleko smanjen. Mislim ovo je osobnih preferencija. Nešto što pomaže je da urednik sam koristiti oblozi kod dolje u sljedeći redak tako da nema horizontalni scrolling.
Josh's last blog .. Addicted to Flickr
FAQPAL kaže on: 29 studeni, 2009 at 4:06 Said:
Dobre savjete početnik, ja ne umanjiti moje CSS bilo, možda i puno veći projekt će imati koristi od minifying, ali prosječna site ne stvarno potreba to.
Što se tiče # 1 odlazi, mislim tekst je ono što je narod baca van, umjesto da se kaže, "Bad Code", možda bi trebalo reći kao safetycopy je predložio, "Alternate Code".
FAQPAL's last blog .. Bubble Effect sa CSS
favSHARE kaže on: 30 studeni, 2009 at 1249: am Said:
Ovaj članak je udio na favSHARE.net. Idite i glas!
favSHARE's last blog .. 25 Web Layout Tutoriali
Jean-Patrick Smith kaže on: 11 prosinac 2009 at 1115: am Said:
Ja obično stvoriti PHP datoteka koja sadrži sve moje css datoteke, minifies, i dodaje sažimanje zaglavlja + istekne.
Na taj način JA dont 'morati složiti s točke # 1 ...
Što je važnije od svega da vaš CSS u jednoj liniji je smanjenje broja HTTP pozive sa CSS Sprites i kombinirajući sve vaše CSS / JS u jednu datoteku.