5 Steps to Write Better CSS osa II
Tämä on toinen osa 5 Steps to Write Better CSS. On paljon CSS tutorials ovat saatavilla Internetissä, mutta muutamat oppitunnit ovat hyödyllisiä. Tämän opetusohjelman löydät 5 toimenpiteet kirjoittamaan paremmin CSS-koodi seuraavan sivuston projekti. Toivon sinun viihtyvän tässä opetusohjelmassa.
1. Pidä CSS yhdellä rivillä
sinun tulisi aina pitää CSS yhdelle riville, se auttaa pitämään CSS-tiedoston puhdas ja pienempiä. Se auttaa myös poistaa ei-toivotut tilat ja merkkejä.
Hyvä Code
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # CCCCCC;)
Bad koodin
H2 ( font-size: 18px; ; color: # 333333; ; background: # CCCCCC; )
2. Yhdistää osia
Yksi paras tapa säästää riviä koodia ryhmittelemällä valitsimet. Olemassa esimerkkejä alla, mitä minä tarkoitan.
Hyvä Code
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad koodin
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. Käytä marginaali on Center Layout
Monet aloittelijat CSS ei voi selvittää, miksi et voi yksinkertaisesti käyttää float: center saavuttamiseksi, että keskitetty vaikutus estää tason elementtejä. Kunpa se olisi niin helppoa! Valitettavasti sinun tulee käyttää.
Koodi
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * ylhäältä, alhaalta - ja vasemmalle, oikealle * / leveys: xxxpx; )
4. Kommentti CSS
Se on hyvä idea kommentoida koodisi osissa. Jos haluat lisätä kommentin, lisää / * takana kommentin, ja * / sulkea, esimerkiksi näin:
Koodi
/******** CODE ALOITA TÄSTÄ ********/
5. Käytä CSS Pakkaa Työkalut
Jos et halua tuhlata aikaa muuttaa vanhan tyylisivut voit käyttää online CSS pakkaa työkaluja, se tee työtä sekunnissa.
Tarkista tämä online CSS pakata työkaluja ...
Css Tidy
Clean Css
Css Optimiser
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C CSS Validator
Tekemisen
Nämä ovat vain joitakin vinkkejä, jotka auttavat minua kirjoittamaan parempaa koodia. Toivon, että opetusohjelma myös auttaa kirjoittamaan paremmin ja puhdasta koodia. Soveltaa näitä vihjeitä nykyisen ja seuraavan hankkeita, ja olet varmasti arvostaa ponnisteluja.
Jos luulet, että opetusohjelma voi olla parempi, hyvä jakaa kanssamme. Kommentti us
Jos haluat saada enemmän tutorials meiltä, ota huomioon tilaamalla myös syötteen RSS-tai sähköpostitse.
Edistää Us
Aiheeseen liittyviä artikkeleita:
Jos olet nauttinut lukea tämä artikkeli, tutustu muita aiheeseen liittyviä artikkeleita alla:
Revellin sanoo: 27 marraskuu 2009 at 9:05 am Said:
Hei,
Ensinnäkin, mukava artikkeli! Ei ole monia artikkeleita, joissa käsitellään kirjoitustyylin CSS. Minulla on joitakin ajatuksia ensimmäinen kohta kuitenkin. Mielestäni on parempi käyttää pitkään kirjoitustyylin kehitettäessä ja on käsikirjoitus "minify" CSS, kun käytät sitä elää ympäristössä.
Dave sanoo: 27 marraskuu 2009 at 10:06 Said:
Olen täysin eri mieltä 1 kohta. Kun olet saanut 3 ilmoitukset, 1 rivi koodia on suuri, mutta kun on 6 tai 7, se saa todella vaikea lukea.
Kaikki tämä säästää ehkä 1KB? I don't get it.
Muuta kuin että yksi osa ihmisarvoista ajatuksia täällä.
Dave viimeinen blog .. 2 lisää pakko saada CMS avulla ampua ajaksi WordPress
Nicolo 'Fasce sanoo: 27 marraskuu 2009 at 10:34 Said:
Olen samaa mieltä Dave, 1 kohta on väärin, sillä jos et töitä joukkueen on hyvin vaikea lukea yhden rivin koodia.
Sinun tulisi myös kirjoittaa koodia aakkosjärjestyksessä samaan tarkoitukseen.
EJ Semeijn sanoo: 27 marraskuu 2009 at 10:57 Said:
Miksi emme lopeta kommentista näitä vinkkejä? Internet on jo täynnä näitä perusasiat vinkkejä. Ja olen myös samaa mieltä # 1. Se ei tee koodi helpompi ymmärtää, se vain vaikeampaa.
Minun vinkkejä olisi asettaa sivun rakennetta CSS, tehdä osiot RESET, otsikot, lomakkeet, HTML-elementit, fontit jne. Näin CSS on helpompi ymmärtää.
safetycopy sanoo: 27 marraskuu 2009 at 9:38 pm Said:
Olen samaa mieltä useiden muiden ihmisten kommentit - kohta 1 on esimerkki huonosta koodia ei ole huono koodi - se on vain vaihtoehtoinen tyyliin. Tämä viesti olisi vain hyödyllistä täydentää aloittelijoille ja emme halua alkaa opettaa niitä huonoja oletuksia jo!
safetycopy viimeinen blog .. Photo
Josh sanoo: 29 marraskuu 2009 at 4:38 am Said:
En kaikki nämä paitsi viimeinen. En löydä sitä hyödyllistä pakata minun css, mutta toisin kuin kaikki aiemmat lukijat Olen vahvasti samaa mieltä kohta # 1. Olen juuri alkanut kirjoittaa minun CSS yksi rivi, ja se on ollut valtava. Scrolling on huomattavasti vähennetty. Kai tämä on henkilökohtaisista mieltymyksistä. Jotain, joka auttaa se, että toimittaja käytän ylireagoi koodia alaspäin seuraavalle riville, joten ei ole horisontaalista rullata.
Josh viimeinen blog .. Addicted to Flickr
FAQPAL sanoo: 29 marraskuu 2009 at 4:06 pm Said:
Hyvä aloittelija vinkkejä, en minify minun CSS joko ehkä paljon suurempi hanke hyötyisi minifying, mutta keskimääräinen sivusto ei oikeastaan tarvitse.
Sikäli kuin # 1 menee mielestäni sanamuoto on mitä heittää ihmiset pois, sen sijaan sanoi, "Bad Code", ehkä pitäisi sanoa kuin safetycopy on ehdottanut, "Alternate Code".
FAQPAL viimeinen blog .. Bubble vaikutus CSS
favSHARE sanoo: 30 marraskuu 2009 aikaa 1249: olen Said:
Tämä artikkeli on jaettava favSHARE.net. Mene ja äänestää sitä!
favSHARE viimeinen blog .. 25 Web-asettelu Oppaat
Jean-Patrick Smith sanoo: 11 joulukuu 2009 at 11:15 Said:
Minulla on tapana luoda PHP-tiedosto, joka sisältää kaikki minun CSS-tiedostoja, minifies se, ja lisää pakkaus + päättyy otsikot.
Tällä tavalla en ole samaa mieltä kohta # 1 ...
Mikä on tärkeämpää kuin kaikki CSS yhdellä rivillä on vähentää HTTP puhelujen CSS sprites ja yhdistämällä kaikki CSS / JS yhdeksi tiedostoksi.