Cascading Style Sheets har blivit det vanliga sättet att utforma och layouta webbplatser. Designers använder stilark att berätta för en webbläsare hur en webbplats ska visas i termer av utseende och känsla, som täcker faktorer som färg, avstånd, teckensnitt och mycket mer.
CSS-stilar distribueras på två sätt:
- Inline - inom kodningen av själva webbsidan, individuellt, element för element
- I ett fristående CSS-dokument, till vilket webbplatsen är länkad
Bästa praxis för CSS
"Bästa metoder" är metoderna för att designa och bygga webbplatser som har visat sig vara de mest effektiva och ger mest avkastning för arbetet. Följ dem in CSS inom webbdesign hjälper webbplatser att se ut och fungera så bra som möjligt. De har utvecklats genom åren tillsammans med andra webbspråk och tekniker, och det fristående CSS-formatmallen har blivit den föredragna metoden för användning.
Att följa bästa praxis för CSS kan förbättra din webbplats på flera sätt:
- Separerar innehåll från design: Ett av huvudmålen med CSS är att ta bort designelement från HTML och placera dem på en annan plats för designern att underhålla. Denna praxis tjänar också till att separera designers från utvecklare så att var och en kan fokusera på sina kompetensområden. En designer behöver inte vara utvecklare för att behålla utseendet på en webbplats.
- Gör underhållet enkelt: Ett av de mest förbisedda elementen i webbdesign är underhåll. Till skillnad från tryckt material är en webbplats aldrig "en och en." Innehåll, design och funktion kan och bör utvecklas över tiden. Att ha CSS på en central plats, snarare än att strö över hela webbplatsen, gör det mycket lättare att underhålla.
- Håller din webbplats tillgänglig: Att använda CSS-stilar hjälper sökmotorer och funktionshindrade att interagera med din webbplats.
- Håller din webbplats aktuell längre: Genom att använda bästa praxis med CSS följer du standarder som har visat sig vara stabila men tillräckligt flexibla för att tillgodose förändringar i webbdesignmiljön.
Inline-stilar är inte bästa praxis
Inline-stilar, även om de har ett syfte, är i allmänhet inte det bästa sättet att underhålla din webbplats. De strider mot alla de bästa metoderna:
- Inline-stilar skiljer inte innehåll från design: Inline-stilar är exakt desamma som inbäddade teckensnitt och andra klumpiga designtaggar som moderna utvecklare spårar mot. Stilarna påverkar endast de specifika, enskilda elementen som de används på; Även om detta tillvägagångssätt kan ge dig mer detaljerad kontroll, gör det också andra aspekter av design och utveckling - som konsistens - svårare.
- Inline-stilar orsakar huvudvärk för underhåll: När du arbetar med stilark kan det vara svårt att ta reda på var en stil ställs in. När du har att göra med en blandning av inbyggda, inbäddade och externa stilar, har du många platser att kontrollera. Om du arbetar i ett webbdesignteam eller måste redesigna eller underhålla en webbplats byggd av någon annan, kommer du att få ännu mer problem. När du väl har hittat stilen och ändrat den måste du göra det på varje element på varje sida där den har placerats. Det ökar tid och arbetsbudgetar astronomiskt.
- Inbyggda stilar är inte lika tillgängliga: Medan en modern skärmläsare eller annan hjälpmedel kan hantera integrerade attribut och taggar effektivt, kan vissa äldre enheter inte, vilket kan resultera i något konstigt visat nät sidor. Extra tecken och text kan också påverka hur din sida visas av en sökmotorrobot, så att din sida inte gör lika bra när det gäller sökmotoroptimering.
- Inline-stilar gör dina sidor större: Om du vill att varje stycke på din webbplats ska visas på ett visst sätt kan du göra det en gång med sex rader kod i ett externt formatmall. Om du gör det med inbyggda stilar måste du dock lägga till dessa stilar i varje stycke på din webbplats. Om du har fem rader CSS är det fem rader multiplicerat med varje stycke på din webbplats. Den bandbredden och laddningstiden kan öka i bråttom.
Alternativet till inbyggda stilar är externa stilar
Använd externa formatmallar istället för att använda inbyggda stilar. De ger dig alla fördelarna med bästa praxis för CSS och är enkla att använda. Använt på detta sätt lever alla stilar som används på din webbplats i ett separat dokument som sedan är länkat till ett webbdokument med en enda kodrad. Externa formatmallar påverkar alla dokument de är bifogade till. Om du har en webbplats på 20 sidor där varje sida använder samma formatmall - vilket är vanligtvis så gjort - du kan göra ändringar på var och en av dessa sidor helt enkelt genom att redigera dessa stilar en gång, i en plats. Att ändra stilar på en plats är bekvämare än att söka efter den kodningen på varje sida på din webbplats. Denna flexibilitet gör långsiktig webbplatshantering mycket enklare.