Front-end webbplatsutveckling representeras ofta som en trebenad pall bestående av:
- HTML för strukturen på en webbplats
- CSS för de visuella stilarna
- Javascript för beteenden
Den andra delen av denna pall, Cascading Style Sheets, stöder tre olika stilar som du kan lägga till i ett dokument.
- Inbyggda stilar
- Inbäddade stilar
- Externa stilar
Var och en av dessa CSS-stilar ger unika fördelar och nackdelar.
Inline Styles
Inline-stilar är stilar som skrivs direkt i taggen i HTML-dokumentet. Inline-format påverkar endast den specifika taggen de används på:
Denna CSS-regel inaktiverar standarddekorationen för understruken text för den här länken. Det skulle dock inte ändra någon annan länk på sidan. Detta är en av begränsningarna i inline-stilar. Eftersom de bara ändras på ett visst objekt måste du kasta din HTML med dessa stilar för att uppnå en enhetlig siddesign. Det är inte en bästa praxis: det är faktiskt ett steg bort från dagarna av font taggar och blandningen av struktur och stil på webbsidor.
Inline-stilar kräver också mycket hög specificitet. Detta gör dem svåra att skriva över med andra, icke-integrerade stilar. Till exempel om du vill göra en webbplats lyhörd och ändra hur ett element ser på vissa brytpunkter genom att använda mediefrågor, inbyggda stilar på ett element gör det svårt att göra.
Inbyggda stilar är endast lämpliga när du använder dem sparsamt, i "undantag från regeln" -metoden som stänger av ett eller två element från sina kamrater på sidan.
Inbäddade stilar
Inbäddade stilar finns i dokumentets huvud. De är inneslutna taggar och ser ut som externa CSS-filer i den delen av dokumentet.
Inbäddade stilar påverkar endast taggarna på sidan de är inbäddade i. Återigen förnekar detta tillvägagångssätt en av styrkorna med CSS. Eftersom varje sida har stilar definierade i rubriken, om du vill göra en ändring på hela webbplatsen - som att ändra färg av länkar från rött till grönt - du måste göra denna ändring på varje sida, eftersom varje sida använder en inbäddad stil ark. Detta tillvägagångssätt är bättre än inbyggda stilar men fortfarande problematiskt i många fall.
Stilark som läggs till i huvudet på ett dokument lägger också till en betydande mängd markeringskod på den sidan, vilket också kan göra sidan svårare att hantera i framtiden.
Fördelen med inbäddade stilark är att de laddas omedelbart med själva sidan istället för att kräva att andra externa filer laddas. Denna teknik kan vara en fördel från nedladdningshastighet och prestationsperspektiv.
Externa stilark
De flesta webbplatser använder idag externa stilark. Externa stilar är stilar som skrivs i ett separat dokument och sedan bifogas olika webbdokument. De kallas in i huvuddokumentet med hjälp av en tagg i dokumentets huvud. Externa stilark kan antingen finnas på samma server som HTML, eller så kan de hämtas från en annan server helt. Detta är ofta fallet med tillgångar, som teckensnitt, som många webbplatser lånar från Google.
Externa stilark påverkar alla dokument de är bifogade till, vilket innebär att om du har en webbplats på 20 sidor där varje sida använder samma formatmall (detta görs vanligtvis), du kan göra en visuell förändring på var och en av dessa sidor genom att helt enkelt redigera den här stilen ark. Denna ekonomi gör långsiktig webbplatshantering mycket enklare.
De flesta professionella webbdesigners använder en primär CSS-fil för att styra webbplatsens layout och design.
Nackdelen med externa formatmallar är att de kräver sidor för att hämta och ladda dessa externa filer. Inte varje sida kommer att använda alla format i CSS-arket, så många sidor kommer att ladda en mycket större CSS-sida än vad som faktiskt behöver.
Även om det är sant att det finns en prestationshitt för externa CSS-filer, kan det verkligen minimeras. Realistiskt sett är CSS-filer bara textfiler, så de är inte stora till att börja med. Om hela webbplatsen använder en enda CSS-fil får du också fördelen att det dokumentet cachas efter att det ursprungligen laddats, vilket innebär att det kan uppstå en liten prestationsträff på den första sidan för vissa besök, men efterföljande sidor använder den cachade CSS-filen, så varje träff skulle vara förnekad.