5 steg för att skriva bättre CSS Del II
Detta är den andra delen av 5 steg för att skriva bättre CSS. Det finns gott om CSS självstudiekurser är tillgängliga på Internet, men de få tutorials är användbara. I den här guiden hittar du 5 steg för att skriva bättre css kod för ditt nästa webbplats projektet. Jag hoppas att ni kommer att njuta av den här guiden.
1. Håll CSS deklarationer på en rad
Du bör alltid hålla CSS-deklarationer i en rad, hjälper det att hålla din CSS-fil ren och mindre. Det bidrar också till att ta bort oönskade mellanslag och tecken.
Kodex
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Felkoderna
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
2. Kombinera Elements
En av de bästa sättet att spara rader kod genom att gruppera väljare. Det finns några exempel nedan på vad jag talar om.
Kodex
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Felkoderna
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. Använd "Marginal" till Center Layout
Många nybörjare på CSS kan inte förstå varför man inte bara kan använda float: center för att uppnå detta centrerad effekt på block-nivå element. Om det vore så enkelt! Tyvärr måste du använda.
Kod
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * topp, botten - och vänster, höger * / width: xxxpx; )
4. Kommentar CSS
Det är en bra idé att kommentera din kod i sektioner. Att lägga till en kommentar, helt enkelt lägga till / * bakom kommentaren, och * / för att stänga det, så här:
Kod
/******** KOD START HÄR ********/
5. Använd CSS Komprimera Tools
Om du inte vill slösa bort din tid på att ändra din gamla formatmallar kan du enkelt använda online-css komprimera verktyg gör det ditt arbete på några sekunder.
kontrollera detta online css komprimera verktyg ...
Css Tidy
Clean CSS
CSS Optimizer
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C CSS validator
Slutsats
Dessa är bara några av de tips som hjälper mig att skriva bättre kod. Jag hoppas att handledning också hjälper dig att skriva bättre och ren kod. Använd dessa tips för att din nuvarande och nästa projekt, och du kommer säkert uppskattar de ansträngningar.
Om du tror att handledning kan vara bättre, Vänligen dela med oss. Kommentar oss
Om du vill få fler tutorials från oss, vänligen överväga att prenumerera på vårt foder genom RSS eller e-post.
Främja oss
Artiklar:
Om du gillade att läsa den här artikeln, kan du kolla in andra relaterade artiklarna nedan:
Revell säger den: November 27, 2009 at 9:05 Said:
Hej,
Först av allt, nice artikel! Det finns inte många artiklar som behandlar den textanalys av CSS. Jag har några tankar om den första punkten dock. Enligt min mening är det bättre att använda den långa textutformning samtidigt utveckla och ha ett script "minify" din CSS när du använder den på en levande miljö.
Dave säger den: November 27, 2009 at 10:06 Said:
Jag håller helt med punkt 1. När du har 3 deklarationer, 1 kodrad är stor, men när det är 6 eller 7, blir det verkligen svårt att läsa.
Allt detta för att spara kanske 1KB? I don't get it.
Annat än att en del goda idéer här.
Dave's senaste blogginlägg .. 2 fler måste-ha CMS gör det möjligt plugins för WordPress
Nicolo 'Fasce säger den: November 27, 2009 at 10:34 Said:
Jag håller med Dave, är den punkt 1 fel, helt enkelt därför att om du arbetar på ett lag är det mycket svårt att läsa en enda rad kod.
Du bör också skriva in koden i alfabetisk ordning för samma ändamål.
EJ Semeijn säger den: 27 november 2009 at 10:57 Said:
Varför slutar vi utstationering dessa tips? Internet är redan full av dessa grundläggande tips. Och jag håller också med # 1. Det inte gör koden lättare att förstå, gör det bara svårare.
Mitt tips skulle vara att ställa sidstruktur i din CSS, göra sektioner för RESET, rubriker, blanketter, HTML-element, typsnitt etc. På så sätt din CSS kommer att vara lättare att förstå.
safetycopy säger den: 27 november 2009 at 9:38 Said:
Jag håller med flera andras kommentarer - punkt 1 är exempel på dålig kod är inte dålig kod - det är bara en alternativ stil. Detta inlägg skulle bara vara bra att komplettera nybörjare och vi vill inte att börja undervisa dem dåliga antaganden redan!
safetycopy senaste blogginlägg .. Photo
Josh säger den: November 29, 2009 at 4:38 Said:
Jag gör alla dessa utom den sista. Jag finner det inte meningsfullt att komprimera mina css, men till skillnad från alla tidigare läsare jag verkligen håller på punkt # 1. Jag har precis börjat skriva min CSS i en rad och det har varit fantastiskt. Rullningen har varit långt minskat. Jag antar att detta är en personlig preferens. Något som hjälper är att redaktören jag använder wraps koden ner till nästa rad så det finns ingen horisontell rullning.
Josh senaste blogginlägg .. Addicted to Flickr
FAQPAL säger den: November 29, 2009 at 4:06 Said:
Bra nybörjar tips, gör minify jag inte mina CSS heller, kanske ett mycket större projekt skulle dra nytta minifying, men den genomsnittliga webbplatsen inte egentligen behöver.
Såvitt # 1 går, tror jag att formuleringen är vad som kastar folk bort, istället för att säga "Bad-koden", kanske man borde säga som safetycopy har föreslagit, "Alternate kod".
FAQPAL senaste blogginlägg .. Bubble Effect med CSS
favSHARE säger den: 30 november, 2009 at 12:49 Said:
Denna artikel har delat på favSHARE.net. Gå och rösta den!
favSHARE senaste blogginlägg .. 25 Web Tutorials Layout
Jean-Patrick Smith säger den: December 11, 2009 at 11:15 Said:
Jag skapar oftast en PHP-fil som innehåller alla mina css-filer, minifies det, och lägger kompression + löper rubriker.
Det sättet har jag inte hålla med punkt # 1 ...
Vad är viktigare än att ha alla CSS på en linje är att minska antalet HTTP samtal med CSS sprites och kombinera alla dina CSS / JS till en fil.