5 trin til at skrive bedre CSS del II
Dette er den anden del af 5 trin til at skrive bedre CSS. Der er masser af CSS tutorials er tilgængelige på internettet, men de få tutorials er nyttige. I denne tutorial vil du finde 5 trin til at skrive bedre css kode til din næste hjemmeside projekt. Jeg håber du vil nyde denne tutorial.
1. Hold CSS erklæringer på én linje
Du bør altid holde CSS-erklæringer i en linje, det hjælper med at holde din CSS fil rene og mindre. Det hjælper også til at fjerne uønskede mellemrum og tegn.
God kode
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # CCCCCC;)
Bad Kode
h2 ( font-size: 18px; ; color: # 333333; ; background: # CCCCCC; )
2. Kombinere elementer
En af de bedste måde at spare linjer kode er ved at samle vælgere. Der er nogle eksempler nedenfor, hvad jeg tænker på.
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. Brug "Margin" til Center Layout
Mange begyndere til CSS kan ikke finde ud af, hvorfor du ikke bare bruge float: center for at nå dette centreret effekt på blok-niveau elementer. Hvis det blot var så let! Desværre, du skal bruge.
Kode
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * top, bund - og venstre, højre * / bredde: xxxpx; )
4. Kommentar din CSS
Det er en god idé at kommentere din kode i sektioner. Hvis du vil tilføje en kommentar, skal du blot tilføje / * bag den kommentar, og * / for at lukke det, som så:
Kode
/******** CODE START HER ********/
5. Brug CSS Komprimer Tools
hvis du ikke ønsker at spilde din tid på at ændre din gamle style sheets du kan blot bruge online css komprimere værktøjer, det gør dit arbejde på få sekunder.
Check dette online css komprimere værktøj ...
Css Tidy
Clean Css
Css Optimiser
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C CSS Validator
Konklusion
Disse er blot nogle af de tips, der hjælper mig til at skrive bedre kode. Jeg håber, at tutorial også vil hjælpe dig til at skrive bedre og ren kode. Anvende disse tips til din nuværende og kommende projekter, og du vil helt sikkert sætte pris på den indsats.
Hvis du tror, at tutorial kan være mere bedre, kan du dele med os. Kommentar os
hvis du ønsker at modtage flere tutorials fra os, kan du overveje at abonnere på vores feed ved RSS eller e-mail.
Markedsføre os
Relaterede artikler:
hvis du har nydt at læse denne artikel, kan du se andre relaterede artikler under:
Revell siger den: 27 november 2009 kl 9:05 Said:
Hej,
Først og fremmest, nice artikel! Der er ikke mange artikler at tage skrivestil af CSS. Jeg har nogle tanker om det første punkt selv. Efter min mening er det bedre at bruge lange skrivestil samtidig udvikle og har et script "minify" din CSS, når du bruger det på en levende miljø.
Dave siger den: 27 november 2009 kl 10:06 Said:
Jeg er helt uenig med punkt 1. Når du har fået 3 erklæringer, 1 linje kode er stor, men når der er 6 eller 7, det bliver rigtig svært at læse.
Alt dette for at spare måske 1KB? Jeg kan ikke få det.
Andet end at den ene, nogle ordentlige idéer her.
Dave's seneste blog .. 2 mere must-have CMS gør det muligt plugins til WordPress
Nicolo 'Fasce siger den: 27 november 2009 kl 10:34 Said:
Jeg er enig med Dave, at punkt 1 er forkert, fordi hvis du arbejder på et hold, det er meget svært at læse en enkelt linje kode.
Du skal også skrive koden i alfabetisk orden til samme formål.
EJ Semeijn siger den: 27 november 2009 kl 10:57 Said:
Hvorfor skal vi holde op med udstationering disse tips? Internettet er allerede fuld af disse basale tips. Og jeg er også uenig med # 1. Det gør ikke din kode lettere at forstå, det bare gør det mere vanskeligt.
Mit tip ville være at sætte den side strukturen i din CSS, gøre sektioner for RESET, overskrifter, formularer, HTML-elementer, skrifttyper osv. På den måde din CSS vil være lettere at forstå.
safetycopy siger den: 27 november 2009 kl 9:38 Said:
Jeg er enig med flere andre folks kommentarer - nr. 1's eksempel på dårlig kode er ikke dårlig kode - det er bare en alternativ stil. Denne post vil kun være nyttigt at fuldføre nybegyndere, og vi ønsker ikke at begynde at lære dem dårlige forudsætninger allerede!
safetycopy's seneste blog .. Photo
Josh siger den: 29 november 2009 kl 4:38 Said:
Jeg har alle disse undtagen den sidste. Jeg finder det ikke hensigtsmæssigt at komprimere mine css, men i modsætning til alle de tidligere læsere Jeg er helt enig i punkt # 1. Jeg er lige begyndt at skrive min CSS i en linje, og det har været fantastisk. Rulningen har været langt mindre. Jeg tror det er en personlig præference. Noget, der hjælper, er, at den editor jeg bruger wraps koden ned til den næste linje, så der er ingen vandret scrolling.
Josh's seneste blog .. Addicted to Flickr
FAQPAL siger den: 29 november 2009 kl 4:06 Said:
Godt nybegynder tips, jeg ikke minify min CSS enten, måske et meget større projekt ville drage fordel af minifying, men den gennemsnitlige site egentlig ikke har brug for.
For så vidt som # 1 siger, jeg tror, at formuleringen er, hvad der er at smide folk ud, i stedet for at sige, "Bad Code", måske det vil sige, gerne safetycopy har foreslået, "Alternate Code".
FAQPAL's seneste blog .. Bubble effekt med CSS
favSHARE siger den: 30 november 2009 kl 12:49 Said:
Denne artikel er blevet delt på favSHARE.net. Gå ud og stemme det!
favSHARE's seneste blog .. 25 Weblayout Tutorials
Jean-Patrick Smith siger den: 11 december 2009 kl 11:15 Said:
Jeg plejer at oprette en PHP-fil, der indeholder alle mine css filer, minifies det, og tilføjer komprimering + udløber overskrifter.
På den måde jeg ikke være enig med punkt # 1 ...
Hvad er mere vigtigt end at have alle dine CSS på en linje er at reducere antallet af HTTP-opkald med CSS sprites og kombinerer alle dine CSS / JS i en fil.