De drie soorten CSS-stijlen

Front-end website-ontwikkeling wordt vaak voorgesteld als een driepotige kruk bestaande uit:

• HTML voor de structuur van een site
• CSS voor de visuele stijlen
• Javascript voor gedrag

De tweede poot van deze kruk, Cascading Style Sheets, ondersteunt drie verschillende stijlen die u aan een document kunt toevoegen.

1. Inline stijlen
2. Ingesloten stijlen
3. Externe stijlen

Elk van deze CSS-stijlen biedt unieke voor- en nadelen.

Inline stijlen Style

Inline-stijlen zijn stijlen die rechtstreeks in de tag in het HTML-document worden geschreven. Inline-stijlen zijn alleen van invloed op de specifieke tag waarop ze worden toegepast:

Deze CSS-regel deactiveert de standaard onderstrepingstekstdecoratie voor deze ene link. Het zou echter geen enkele andere link op de pagina veranderen. Dit is een van de beperkingen van inline-stijlen. Omdat ze alleen veranderen bij een specifiek item, zou je je HTML moeten vervuilen met deze stijlen om een ​​uniform pagina-ontwerp te krijgen. Dat is geen best practice: in feite is het een stap verwijderd van de dagen van

lettertype tags en de vermenging van structuur en stijl in webpagina's.

Inline-stijlen vereisen ook een zeer hoge specificiteit. Dit maakt ze moeilijk te overschrijven met andere, niet-inline stijlen. Als u bijvoorbeeld een site responsief wilt maken en wilt wijzigen hoe een element naar bepaalde breekpunten kijkt met behulp van mediaquery's, maken inline-stijlen op een element dit moeilijk om te doen.

Inline-stijlen zijn alleen geschikt als u ze spaarzaam gebruikt, in de "uitzondering op de regel"-benadering die een of twee elementen onderscheidt van hun collega's op de pagina.

Ingesloten stijlen

Ingesloten stijlen bevinden zich in de kop van het document. Ze zijn ingekapseld in tags en lijken veel op externe CSS-bestanden in dat gedeelte van het document.

Ingesloten stijlen zijn alleen van invloed op de tags op de pagina waarin ze zijn ingesloten. Nogmaals, deze aanpak ontkent een van de sterke punten van CSS. Aangezien elke pagina stijlen bevat die zijn gedefinieerd in de koptekst, als u een wijziging voor de hele site wilt maken, zoals het wijzigen van de kleur van links van rood naar groen — u zou deze wijziging op elke pagina moeten aanbrengen, aangezien elke pagina een ingesloten stijl gebruikt vel. Deze aanpak is beter dan inline-stijlen, maar is in veel gevallen nog steeds problematisch.

Stylesheets die aan de kop van een document worden toegevoegd, voegen ook een aanzienlijke hoeveelheid opmaakcode toe aan die pagina, waardoor de pagina in de toekomst moeilijker te beheren kan zijn.

Het voordeel van ingebedde stijlbladen is dat ze onmiddellijk met de pagina zelf worden geladen, in plaats van dat andere externe bestanden moeten worden geladen. Deze techniek kan een voordeel zijn vanuit het oogpunt van downloadsnelheid en prestatie.

Externe stijlbladen

De meeste websites gebruiken tegenwoordig externe stylesheets. Externe stijlen zijn stijlen die in een apart document worden geschreven en vervolgens aan verschillende webdocumenten worden gekoppeld. Ze worden in het hoofddocument geroepen met a tag in de kop van het document. Externe stylesheets kunnen ofwel op dezelfde server staan ​​als de HTML, of ze kunnen volledig van een andere server worden gehaald. Dit is vaak het geval met items, zoals lettertypen, die veel sites van Google lenen.

Externe stijlbladen van invloed zijn op elk document waaraan ze zijn gekoppeld, wat betekent dat als u een website van 20 pagina's heeft waarbij elke pagina dezelfde stylesheet gebruikt (dit is meestal hoe het wordt gedaan), u kunt een visuele wijziging aanbrengen in elk van die pagina's door simpelweg die ene stijl te bewerken vel. Deze economie maakt sitebeheer op lange termijn veel gemakkelijker.

Het nadeel van externe stylesheets is dat ze pagina's nodig hebben om deze externe bestanden op te halen en te laden. Niet elke pagina zal elke stijl in het CSS-blad gebruiken, dus veel pagina's zullen een veel grotere CSS-pagina laden dan nodig is.

Hoewel het waar is dat er een prestatiehit is voor externe CSS-bestanden, kan deze zeker worden geminimaliseerd. Realistisch gezien zijn CSS-bestanden slechts tekstbestanden, dus ze zijn om te beginnen niet groot. Als uw hele site een enkel CSS-bestand gebruikt, profiteert u ook van het voordeel dat dat document in de cache wordt opgeslagen nadat het voor het eerst is geladen, wat betekent dat er kan bij sommige bezoeken een kleine prestatiehit zijn op de eerste pagina, maar volgende pagina's zullen het CSS-bestand in de cache gebruiken, dus elke hit zou zijn ontkend.