Så här optimerar du din CSS
Att hålla dina CSS-filer små och organiserade är väldigt viktigt, särskilt om du ska spendera tid när du redigerar din webbplats i framtiden, eller om andra kommer att använda koden, dvs klienter.
Det finns ett antal olika tekniker som kan användas för att hjälpa organisationen och storleken på dina CSS-filer för att göra dem mer strömlinjeformade.
Att ha mer strömlinjeformad CSS sparar tid och stress i längden så det är viktigt att få det rätt.
För det första är det ett bra ställe att starta i organisationen av din CSS genom att hålla ett enda stilark, normalt namnet style.css. Att ha ett enda format för majoriteten (om inte alla) på din webbplats håller allt ihop på ett ställe vilket gör redigeringsprocessen mer effektiv.
Kod i stil
För att hålla dina CSS-filer mer effektivisera är det viktigt att börja med att använda en bra kodredigerare, till exempel Textwrangler på Mac eller anteckningsblock ++ på Windows. Detta har ett antal viktiga fördelar. Förutom att det är lätt att använda, färgar ett program som TextWrangler också olika delar av kod som hjälper till vid kodningens framsteg. Det här är mycket användbart för att se till att varje stil du har definierats stavas rätt eftersom stilen inte kommer att ändra färg om den inte känns igen av TextWrangler som en CSS-stil. Flikar är ett annat bra inslag i TextWrangler så att du kan öppna mer än en fil åt gången vilket gör kryssrutan enklare.
För att ytterligare effektivisera dina CSS-filer är det en bra idé att skapa en uppsättning layout som används i alla dina CSS-stilark. Kanske är den vanligaste tekniken att definiera ID eller klass (med respektive resp. Respektive) och sedan en öppen konsol {följt av en inramad ny linje för att börja styling, som så:
#header {width:500px;height:250px;}Genom att följa den här vanliga tekniken kommer ditt stylesheet att vara mer organiserat och enklare att koda. Följande tekniker hjälper alla med att se till att din layout är konsekvent i alla dina CSS-filer.
Organisera efter plats
Med vilken plats som helst kan antalet CSS-ID och klasser som används enkelt nå ett stort antal, så det är viktigt att ditt CSS-stilark är välorganiserat. En av de tekniker som är extremt användbar är att beställa dina ID och klasser genom var de visas på webbplatsen själv. Till exempel; Placerar CSS-stilen för rubriken mot toppen av stilarket och Styling för fotfoten mot botten. Genom att hålla detta konsekvent över alla webbplatser du kodar när du öppnar ett stilark som du har skapat vet du exakt var du ska leta efter den stil du vill redigera.
För att ytterligare stödja utformningen av stilar är det klokt att namnge dina element med uppenbara namn som Header, Footer, Sidebar, Main Content etc., vilket gör att du kan ta reda på vad varje stycke styling hänvisar till, vilket hjälper organisationen ytterligare. Om element ändras ändå, se till att deras namn speglar förändringarna. Att ha ett element med namnet Header som finns längst ner på sidan kan bli mycket förvirrande och gör beställning på plats en mer skrämmande uppgift.
CSS Kommentarer
Detta leder till att du använder CSS-kommentarer inom dina stylesheets. Även om det inte alltid används, CSS kommenterar att vara till stor hjälp för att skilja olika delar av stilarket. Om du har strukturerat dina stilark med stilar relaterade till rubriken mot toppen och vice versa, kan du använda CSS-kommentarer för att markera början och slutet på olika sektioner som rubrik och sidfot eller huvudinnehållselementen.
Att använda CSS kommentarer är enkelt. Överallt inom stilarket startar kommentaren med /* och var noga med att avsluta kommentaren med */ . Viktigt, vad som helst i kommentaren, det är kod eller text, kommer inte att analyseras av webbläsaren, vilket gör CSS-kommentarer mycket användbara för att lämna anteckningar och beskrivningar som rör olika delar av stilarket.
Kanske ytterligare två användningsområden för CSS-kommentarer kan vara att lämna kommentarer till dina kunder, så ska de önska att göra ytterligare ändringar till sin webbplats i framtiden har de en guide för att hjälpa till. Det kan också finnas olika stilar för samma ID eller klass som du vill behålla för potentiell användning eller för testning. I stället för att märka ID och klasser med en 2 i slutet, t.ex. header2 , stoppa den styling från att analyseras helt enkelt wrap vad som skulle vara header2 i /* och */ .
Förutom att hålla stilarket mer organiserat kan det med hjälp av "2-tekniken" lätt bli rörigt. Denna teknik hjälper också till att skapa olika versioner av styling inom stilarket på ett obetydligt sätt med enkel omplacering (kopiera och klistra in i stället för ändra nummer och radera gammal styling).
Men medan CSS-kommentarerna är mycket användbara är det också viktigt att komma ihåg stil och längd på stilarket och balansera i enlighet därmed. Kommentarer bör inte ta upp mer utrymme än den faktiska CSS; de borde vara korta och till den punkten. Det är också viktigt att komma ihåg detta i förhållande till olika versioner. Behöver du verkligen alla versioner som du har sparat i ditt stilark? Kan du spara ett duplikat stilark någon annanstans? Att ha flera versioner av stilar i ditt stilark kan bli förvirrande, så hänsyn till alternativ är avgörande, till exempel att spara dubbla filer.
Undvik dubbelarbete
När stilarket är strukturerat på ett tillgängligt sätt kan det vara enkelt att välja onödiga duplikeringar inom styling. På grund av karaktären hos CSS, är ID och klasser automatiskt arv av styling från deras förälder, vilket eliminerar behovet av att dubbla upp på styling. Kanske är det enklaste sättet att definiera ett antal nyckelstilar i början av stilarket. Definiera universella stilar för länkar och text är till hjälp och tar bort behovet att ständigt definiera styling för varje ID och klass. Det här är också ett effektivt sätt att upprätthålla en konsekvent stil på en webbplats och har en positiv inverkan på att minska storleken på stilarket också.
Med hjälp av ett verktyg som Google Chrome inspektör är det möjligt att se vilka stilar som ärvs och varifrån, vilket ytterligare hjälper till att eliminera oönskade dupliceringar i ditt stilark.
Använd vad du behöver
Följ vidare, för att ytterligare effektivisera din CSS överväga vilka CSS-klasser du implementerar. Behöver du använda dem alla? Det är lätt att ta sig bort och definiera klasser som du inte behöver direkt men tror att du kan göra i framtiden. För att hålla din CSS-stilark effektivisera, använder små och organiserade endast CSS-klasser som är integrerade för din webbplatss funktion. Bara kod vad som behövs. För att uppnå detta undviker du duplicering av stilar, som anges, och kom ihåg att ta bort oanvända stilar och de som inte längre är relevanta.
Slutsats
Genom att följa dessa enkla tekniker är det möjligt att skapa bättre organiserade och mindre CSS-filer som är lätta att navigera och redigera, både nu och i framtiden för dig själv och dina kunder.
Har du några bra tips för att hålla din CSS organiserad och effektiv? Låt oss veta i kommentarerna!