Skip to main content

Observera CSS bästa praxis: Undvik CSS Inline Styles

Kontroll av automatisk avluftare (April 2025)

Kontroll av automatisk avluftare (April 2025)
Anonim

CSS (Cascading Style Sheets) har blivit de facto sättet att utforma och layout webbplatser. Designers använder stylesheets för att berätta för en webbläsare hur en webbplats ska visas med avseende på utseende och känsla, som omfattar färger, mellanrum, teckensnitt och mycket mer.

CSS-format kan distribueras på två sätt:

  • Inline - inom kodningen av webbsidan själv, på individuell, element-för-element-basis
  • I ett fristående CSS-dokument, som webbplatsen är länkad till

Bästa praxis för CSS

"Bästa metoder" är metoderna för att designa och bygga webbplatser som har visat sig vara mest effektiva och att ge mest möjliga avkastning för det aktuella arbetet. Att följa dem i CSS i webbdesign hjälper webbplatser att se och fungera så bra som möjligt. De har utvecklats genom åren tillsammans med andra webbspråk och -teknik, och det fristående CSS-stilarket har blivit den föredragna användningsmetoden.

Följande bästa metoder för CSS kan förbättra din webbplats på följande sätt:

  • Separerar innehåll från design.Ett av CSS: s huvudsyfte är att ta bort designelement från HTML och placera dem på en annan plats för att konstruktören ska behålla. Detta tjänar också till att skilja designers från utvecklare så att alla kan fokusera på sina kompetensområden. En designer behöver inte vara en utvecklare för att behålla utseendet på en webbplats.
  • Gör underhåll enkelt.Ett av de mest förbisedda elementen i webbdesign är underhåll. Till skillnad från tryckmaterial är en webbplats aldrig "en och klar". Innehåll, design och funktion kan och bör utvecklas över tiden. Att ha CSS på ett centralt ställe, snarare än att strö igenom hela webbplatsen, gör sakerna mycket enklare att behålla.
  • Håller din webbplats tillgänglig.Använda CSS-format hjälper sökmotorer och funktionshindrade personer 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, medan de har ett syfte, är i allmänhet inte det bästa sättet att behålla din webbplats. De går emot alla de bästa metoderna:

  • Inline-stilar separerar inte innehåll från design.Inline-stilar är exakt samma som inbäddade teckensnitt och andra klumpiga designtaggar som moderna utvecklare rinner mot. Stilarna påverkar endast de enskilda, enskilda elementen som de tillämpas på. medan det kan ge dig mer granulär kontroll, gör det också andra aspekter av design och utveckling - som konsistens - svårare.
  • Inline-stilar orsakar huvudvärk vid underhåll.När du arbetar med stylesheets kan det vara svårt att bestämma var en stil ställs in. När du arbetar med en blandning av inline, inbäddade och externa stilar, har du många platser att kolla. Om du arbetar på ett webbdesignteam eller behöver redogöra för eller bibehålla en webbplats som byggts av någon annan, kommer du att få ännu mer problem. När du hittat stilen och ändrar den måste du göra det på varje element på varje sida där den har placerats. Det ökar tid och arbetsbudgetar astronomiskt.
  • Inline-stilar är inte lika tillgängliga.Medan en modern skärmläsare eller annan hjälpanordning kanske kan hantera inlineattribut och taggar effektivt kan vissa äldre enheter inte, vilket kan leda till några konstigt visade webbsidor. Extra tecken och text kan påverka hur din sida ses av en sökmotorrobot, så din sida gör inte lika bra när det gäller sökmotoroptimering (SEO).
  • 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 eller så om kod i ett externt stilark. Om du gör det med inline-stilar måste du dock lägga till dessa stilar i varje stycke på din webbplats. Om du har fem rader av CSS, är det fem rader multiplicerat med varje stycke på din webbplats. Den bandbredd och laddningstiden kan lägga sig i skynda.

Alternativet till Inline Styles: Externa Style Sheets

Istället för att använda inline-format använder du externa formatark. De ger dig alla fördelar med CSS bästa praxis och är lätta att använda. Anställd på detta sätt lever alla stilar som används på din webbplats i ett separat dokument som sedan länkas till ett webbdokument med en enda kodrad. Externa formatmallar påverkar alla dokument de är kopplade till. Det betyder att om du har en sida på 20 sidor där varje sida använder samma stilark - vilket vanligtvis är hur det görs - kan du göra en förändring till var och en av dessa sidor helt enkelt genom att redigera dessa stilar en gång, på ett ställe. Att ändra stilar på en plats är oändligt bekvämare än att söka efter den kodning på varje sida på din webbplats. Detta gör långsiktig webbplatshantering mycket enklare.