5 trinn til å skrive bedre CSS Del II
Dette er den andre delen av 5 trinn for å skrive bedre CSS. Det er mange CSS opplæringsprogrammer er tilgjengelige på internett, men de få opplæring er nyttige. I denne opplæringen vil du finne 5 trinn til å skrive bedre css-koden til din neste nettside prosjektet. Jeg håper du vil like denne opplæringen.
1. Hold CSS erklæringer på én linje
Du bør alltid holde CSS erklæringer på én linje, hjelper det å holde din CSS-fil ren og mindre. Det hjelper også å fjerne uønskede mellomrom og tegn.
God kode
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Bad Kode
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
2. Kombiner Elements
En av de beste måten å spare kodelinjer er ved gruppering velgere. Det finnes noen eksempler nedenfor om hva jeg sikter til.
God kode
h1, h2, h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad Kode
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. Bruk "Margin" til Center Layout
Mange nybegynnere til CSS kan ikke finne ut hvorfor du ikke kan ganske enkelt bruke float: senter for å oppnå at sentrert effekt på blokk-nivå elementer. Hvis bare det var så lett! Dessverre, må du bruke.
Kode
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * topp, bunn - og venstre, høyre * / width: xxxpx; )
4. Kommentar CSS
Det er en god idé å kommentere koden i deler. For å legge til en kommentar, bare legg til / * bak kommentaren, og * / lukke det, slik:
Kode
/******** KODE START HER ********/
5. Bruk CSS Komprimer Verktøy
hvis du ikke ønsker å kaste bort tiden din på å endre den gamle stilen ark du kan ganske enkelt bruke online css komprimere verktøy, gjør det arbeidet ditt i løpet av sekunder.
sjekk denne online css komprimere verktøy ...
Css Tidy
Clean Css
Css Optimiser
Flumpcakes Css optimere
cssdrive Css Comperasor
W3C CSS Validator
Konklusjon
Dette er noen av tipsene som hjelper meg til å skrive bedre kode. Jeg håper at veiledningen vil også hjelpe deg å skrive bedre og ren kode. Bruk disse tipsene til din nåværende og neste prosjekter, og du vil sikkert sette pris på innsatsen.
Hvis du tror at opplæringen kan bli mer bedre, kan du dele med oss. Kommentar oss
Hvis du ønsker å motta mer opplæring fra oss, kan du vurdere å abonnere på vårt feed via RSS eller via e-post.
Fremme oss
Relaterte artikler:
Hvis du likte å lese denne artikkelen, kan du sjekke ut andre relaterte artiklene nedenfor:
Revell sier den: 27 november 2009 kl 9:05 Said:
Hei,
Først av alt, fin artikkel! Det er ikke mange artikler som tar det å skrive stil på CSS. Jeg har noen tanker om det første punktet skjønt. Etter min mening er det bedre å bruke lang tid å skrive stil, mens utvikling og har et script "minify" CSS når du bruker den på et levende miljø.
Dave sier den: 27 november 2009 kl 10:06 Said:
Jeg helt uenig med punkt 1. Når du har fått 3 erklæringer, 1 kodelinje er flott, men når det er 6 eller 7, blir det virkelig vanskelig å lese.
Alle som skal lagre kanskje 1KB? I don't get it.
Annet enn at man noen skikkelige ideer her.
Dave siste blogginnlegg .. 2 flere må-ha CMS muliggjør plugins for WordPress
Nicolo 'Fasce sier den: 27 november 2009 kl 10:34 Said:
Jeg er enig med Dave er punkt 1 galt, bare fordi hvis du jobber på et lag det er veldig vanskelig å lese en linje kode.
Du bør også skrive koden i alfabetisk rekkefølge for samme formål.
EJ Semeijn sier den: 27 november 2009 kl 10:57 Said:
Hvorfor stopper vi legger disse tipsene? Internett er allerede fullt av disse grunnleggende tips. Og jeg også uenig med # 1. Det gjør ikke koden din lettere å forstå, er det bare det vanskeligere.
Mitt tips vil være å sette siden strukturen i CSS, lage profiler for RESET, overskrifter, skjemaer, HTML-elementer, fonter osv. På den måten CSS vil være enklere å forstå.
safetycopy sier den: 27 november 2009 for 938: pm Said:
Jeg er enig med flere andre menneskers kommentarer - punkt 1 er eksempel på dårlig kode er ikke dårlig koden - det er bare en annen stil. Dette innlegget vil bare være nyttig å fullføre newbies og vi ønsker ikke å begynne å lære dem dårlige forutsetninger allerede!
safetycopy siste blogginnlegg .. Foto
Josh sier den: 29 november 2009 kl 4:38 Said:
Jeg gjør alle disse unntatt den siste. Jeg kan ikke finne det nyttig å komprimere mine css, men i motsetning til alle tidligere leserne jeg sterkt enige om punkt # 1. Jeg begynte å skrive min CSS i en linje, og det har vært enorm. Den bla har vært langt lavere. Jeg antar dette er en personlig preferanse. Noe som hjelper er at editoren jeg bruker brytes koden ned til neste linje, så det er ingen horisontal rulling.
Josh siste blogginnlegg .. Addicted to Flickr
FAQPAL sier den: 29 november 2009 kl 4:06 Said:
God nybegynner tips, vet jeg ikke minify min CSS heller, kanskje et mye større prosjekt ville ha nytte av minifying, men den gjennomsnittlige området egentlig ikke trenger.
Såvidt # 1 går, tror jeg ordlyden er det som å kaste folk ut, istedenfor å si, "Bad Code", kanskje det burde si som safetycopy har foreslått, "Alternate Code".
FAQPAL siste blogginnlegg .. Bubble Effect med CSS
favSHARE sier den: 30 november 2009 kl 12:49 Said:
Denne artikkelen er delt opp på favSHARE.net. Gå og stem den!
favSHARE siste blogginnlegg .. 25 Web Layout Tutorials
Jean-Patrick Smith sier den: 11 desember 2009 kl 11:15 Said:
Jeg pleier å lage en PHP fil som inneholder alle mine CSS-filer, minifies det, og legger til komprimering + utløper overskrifter.
På den måten vil jeg ikke være enige med punkt # 1 ...
Hva er viktigere enn å ha alle CSS på én linje er å redusere antall HTTP samtaler med CSS sprites og kombinere alle CSS / JS i én fil.