Inline CSS & externa stillmallar

Inline CSS

Inline CSS innebär att attributet style används för att modifiera en eller flera CSS-egenskaper för HTML-elementet med attributet. Den största styrkan med inline CSS är flexibiliteten med att kunna justera stilen för ett enskilt element efter behov. Den flexibiliteten kommer dock inte utan nackdelar, genom att använda inline CSS bryter utvecklaren mot principen om separation of concerns.

I vissa fall kan inline CSS vara den enda lösningen för att justera utseendet. Detta gäller främst i olika typer av CMS-system där en redaktör utan behörighet till webbservern önskar göra mindre justeringar av t.ex. text- eller bildelement. CMS-verktyg som låter redaktören skriva HTML med style-attributet kan således kringå en krånglig process av att uppdatera en CSS-fil.

Fördelar

• Simplicitet: Behöver bara ändra på "kod" på ett ställe.
• Flexibilitet: Det går lätt att justera utseendet på ett enskilt element efter behov.
• CMS: Lämplig lösning (eller räddning) efter behov i CMS-verktyg.

Nackdelar

• Underhåll: Webbplatser som består av flera olika sidor blir svårare att underhålla.
• Principen om separation of concerns: Inline CSS bryter mot principen genom att blanda HTML och CSS i samma fil.

Externa stilmallar

Externa stilmallar innebär att CSS-egenskaper modifieras i en (eller flera) separata filer. För att modifiera egenskaperna för ett eller flera element används CSS-selektorer. Selektorerna tillåter mer avancerad CSS. Oftast används så kallade klasser i selektorerna för att välja vilket/vilka element som ska få sina CSS-egenskaper modifierade. Ibland används ett id istället på ett identiskt sätt av olika skäl. Det går dessutom att skippa klasser och id helt och hållet genom att istället specificera elementet efter dess namn (t.ex. a eller body).

För klasser gäller det att de HTML-element som ska få de modifierade CSS-egenskaperna har med klassnamnet i sitt class-attribut (t.ex. <a class="klassnamn">). I CSS-filen författas en selektor till klassen med en punkt före klassnamnet för att specificera att det är en klass (t.ex. .klassnamn {}). Principen är densamma för id, men istället för class-attributet används id-attributet och istället för en punkt används ett hashtag (#).

Den största styrkan med externa stilmallar är det förenklade underhållet som skapas när flera olika HTML-dokument kan peka till samma CSS-fil. Det gör i sin tur att CSS-egenskaper modifieras över flera sidor på samma sätt, vilket gör att ändringar följer med på alla sidor. En annan fördel är den ökade kontrollen som CSS-selektorerna och kombinatorerna ger i CSS-filerna. Det går att göra mer komplexa stilmallar med hjälp av diverse selektorer och kombinatorer. CSS-tricks har en mycket bra artikel om selektorer och kombinatorer som visar vad som är möjligt. Dessutom följer externa stilmallar principen om separation of concerns eftersom CSS hamnar i en egen fil och HTML i en annan.

Genom att använda sig av CSS-filer blir det lätt för utvecklare att skapa nya teman till färdiga webblösningar. Säg till exempel att du som frilansande utvecklare har en kund som önskar fräscha upp sin webbshop eller sitt forum. Som utvecklare kan du enkelt skapa ett nytt tema genom att duplicera CSS-filerna och ändra CSS-egenskaperna innanför selektorerna. Det går såklart att diskutera hur det påverkar eventuella uppdateringar av den färdiga webblösningen, men det är en helt annan historia.

Vad gäller nackdelar kan den ökade komplexiteten som uppstår genom selektorer och kombinatorer leda till förvirring hos utvecklaren om den inte har full koll på hur de fungerar. Dessutom som med allt i webbläsaren, fler filer innebär fler HTTP-förfrågningar som i sin tur kan öka på laddningstiden. Detta gäller i synnerhet då filerna blir stora, vilket knappast är ett problem i dessa uppgifter.

Fördelar

• Underhåll: Tack vare återanvändning.
• Kraftfullhet: Ökad kontroll med selektorer och kombinatorer.
• Teman: Det går lätt att byta utseendet på färdiga webblösnignar.
• Följer principen om separation of concerns: CSS och HTML är uppdelade i egna filer.

Nackdelar

• Komplexitet: Med ökad kontroll följer ökad komplexitet.
• Laddningstider: Fler HTTP-förfrågningar kan sakta ner laddningstiden.

En modern blandning: TailwindCSS

TailwindCSS är ett väldigt omdebatterat modernt CSS-ramverk som jag menar platsar sig väl i diskussionen om inline CSS vs externa stilmallar. Det som gör TailwindCSS speciellt är det faktum att det skulle kunna sägas kombinera de olika metoderna. Mycket likt inline css låter TailwindCSS utvecklare specificera egenskaper direkt i HTML – men det görs med förskapta klasser istället för med style-attributet. I regel modifierar en klass en egenskap, på så sätt uppnås egentligen samma sak som om en skulle skriva inline CSS. Men med färre tecken.

Som tidigare nämnt är användningen av TailwindCSS mycket omdebatterad. Detta grundar sig till stor del i att extern CSS gärna anses bättre med alla sina fördelar. Främst ur ett perspektiv av återanvändning och underhåll. Här bör dock poängteras att merparten av förespråkare för TailwindCSS använder sig av återanvändbara komponenter i JavaScript-ramverk såsom till exempel React, Vue eller Angular. Genom att kombinera TailwindCSS med komponenter omfördelas för- och nackdelarna då komponenterna återigen förenklar underhåll och återanvändning på ett vis som gör att ändringar visas konsekvent över hela webbplatsen.