10 bästa CSS-metoder för att förbättra din kod
Det är verkligen lätt att hitta dig själv undrar hur din CSS skulle vara en sådan röra.
Ibland är det resultatet av slarvkodning från början, ibland beror det på flera hackar och förändringar över tiden.
Oavsett orsaken behöver det inte vara så. Att skriva ren, superhanterlig CSS är enkel när du börjar på den högra foten och gör din kod lättare att underhålla och redigera senare.
Här är 11 tips för att påskynda processen, skriva CSS som är smalare, snabbare och mindre sannolikt att ge dig huvudvärk.
1. Stanna organiserade
Precis som allt annat, lönar det sig att hålla sig organiserade. Snarare än att slumpvis släppa i id och klasser i den ordning de kommer ihåg, använd en sammanhängande struktur.
Det hjälper dig att hålla kaskaddelen av CSS i åtanke och ställa in ditt stilark för att dra nytta av stilarvet.
Förklara dina mest generiska saker först, då de inte-så-generiska och så vidare. Detta låter din CSS ordentligt erva attribut och gör det mycket lättare för dig att åsidosätta en viss stil när du behöver. Du kommer att bli snabbare när du redigerar din CSS senare eftersom den följer en lättläst, logisk struktur.
Använd en struktur som fungerar bäst för dig samtidigt som du håller framtida ändringar och andra utvecklare i åtanke.
- Återställer och överklagar
- Länkar och typ
- Huvudlayout
- Sekundära layoutstrukturer
- Formelement
- Diverse
2. Titel, datum och tecken
Låt andra veta vem skrev din CSS, när den skrevs och vem du ska kontakta om de har frågor om det. Detta är särskilt användbart när du utformar mallar eller teman.
Vänta en minut ... vad är det lite om färgfärger ? Under årens lopp har jag funnit att det är mycket användbart att lägga till en enkel lista över vanliga färger som används i min stilark, och under senare utveckling.
Detta sparar dig från att du måste öppna Photoshop för att prova en färg från designen, eller slå upp färgerna på webbplatsen stil guide (om den har en). När du behöver HTML-koden för den specifika blåen, bläddra bara och kopiera den.
3. Håll ett mallbibliotek
När du har bestämt dig för en struktur som ska användas, ta bort allt som inte är generiskt och spara filen som en CSS-mall för senare användning.
Du kan spara flera versioner för flera användningar: en layout med två kolumner, en blogglayout, utskrift, mobil och så vidare. coda (redaktören för OSX) har en fantastisk Clips- funktion som låter dig göra det enkelt. Många andra redaktörer har en liknande funktion, men även en enkel grupp textfiler fungerar bra.
Det är vansinnigt att skriva om var och en av dina stilarkar från början, speciellt när du använder samma konventioner och metoder i var och en.
4. Använd användbara namngivningskonventioner
Du kommer att märka ovanför där jag förklarade ett par kolumn id och jag kallade dem col-alpha och col-beta. Varför inte bara kalla dem kol-vänster och kol-höger? Tänk på framtida ändringar, alltid.
Nästa år kan du behöva redesigna din webbplats och flytta den vänstra kolumnen till höger. Du ska inte behöva byta namn på elementet i din HTML och ändra namnet på ditt stilark bara för att ändra dess position.
Visst, du kan bara flytta den vänstra kolumnen till höger och behåll id som # col-left, men hur förvirrande är det? Om id säger vänster, borde man förvänta sig att det alltid kommer till vänster. Detta ger dig inte mycket utrymme att flytta saker runt senare.
En av de största fördelarna med CSS är möjligheten att skilja stilar från innehåll. Du kan helt omskapa din webbplats genom att bara ändra CSS utan att någonsin röra HTML. Så smutsa inte upp din CSS genom att använda begränsande namn . Använd mer mångsidiga namngivningskonventioner och förbli konsekventa.
Lämna position eller stilspecifika ord ur dina stilar och id. En klass av .link-blue kommer antingen att göra mer arbete för dig eller göra ditt stilark riktigt rörigt när din kund senare frågar dig att ändra de blå länkarna till orange.
Nämn dina element baserat på vad de är, inte hur de ser ut. Exempelvis är .comment-blue mycket mindre än vad som är .comment-beta, och .post-largefont är mer begränsande än .post-title.
5. Hyphens istället för underskrifter
Äldre webbläsare gillar att bli glitchy med understreck i CSS, eller stöder dem inte alls. För bättre bakåtkompatibilitet, bli vana att använda bindestreck istället. Använd # col-alpha istället för #col_alpha.
6. Repetera inte dig själv
Återanvänd attribut närhelst det är möjligt genom att gruppera element istället för att deklarera formaten igen. Om dina h1 och h2-element använder både samma typsnitt, färg och marginaler, gruppera dem med kommatecken.
Detta:
Du bör också använda genvägar när det är möjligt. Var alltid på utkik efter möjligheter att gruppera element och använda deklarationsgenvägar.
Du kan uppnå allt detta:
med endast detta:
Det är väldigt viktigt att du förstår den ordning i vilken CSS tolkar dessa genvägar: topp, höger, botten, vänster. En stor medurs cirkel, som börjar vid middagstid.
Om dina över- och botten- eller vänster- och högerattribut är samma, behöver du bara använda två:
Detta ställer de övre och nedre marginalerna till 1em, och vänster och höger marginal till 0.
7. Optimera för lätta stilark
Med hjälp av ovanstående tips kan du verkligen minska storleken på dina stilark. Mindre lastar snabbare och mindre är lättare att underhålla och uppdatera.
Klipp ut vad du inte behöver och konsolidera när det är möjligt genom att gruppera. Var försiktig vid användning av konserverade CSS-ramar. Du kommer sannolikt att ärva mycket massa som inte kommer att användas.
Ett annat snabbt tips för smal CSS: du behöver inte ange en måttenhet när du använder noll. Om en marginal är satt till 0 behöver du inte säga 0px eller 0em. Noll är noll oavsett måttenhet, och CSS förstår detta.
8. Skriv din bas för Gecko, sedan Tweak för Webkit och IE
Spara själv felsökning huvudvärk och skriv CSS först för Gecko webbläsare (Firefox, Mozilla, Netscape, Flock, Camino). Om din CSS fungerar korrekt med Gecko är det mycket mer sannolikt att det är problemfritt i Webkit (Safari, Chrome) och Internet Explorer.
9. Validera
Använda W3C: s gratis CSS-validerare . Om du sitter fast och din layout inte gör vad du vill att den ska göra, kommer CSS-valideringen att vara en stor hjälp för att peka på fel.
10. Håll ett städat hus
Separera webbläsarspecifik CSS till sitt eget individuella stilark, och inkludera vid behov med Javascript, server-sidokod eller villkorliga kommentarer . Använd den här metoden för att undvika smutsiga CSS-hacken i dina huvudsakliga stilark. Detta kommer att hålla din bas CSS ren och hanterbar.
Skriven uteslutande för WDD av Jeff Couturier
Följer du dessa metoder när du kodar dina webbplatser? Vilka andra tekniker använder du för att skapa bättre kod?