Front-end-webstedsudvikling er ofte repræsenteret som en trebenet skammel bestående af:
- HTML til strukturen af et sted
- CSS til de visuelle stilarter
- Javascript til adfærd
Det andet ben på denne afføring, Cascading Style Sheets, understøtter tre forskellige stilarter, som du kan føje til et dokument.
- Inline stilarter
- Indlejrede stilarter
- Eksterne stilarter
Hver af disse CSS-stilarter præsenterer unikke fordele og ulemper.
Inline-stilarter
Inline-typografier er typografier, der skrives direkte i tagget i HTML-dokumentet. Integrerede typografier påvirker kun det specifikke tag, de anvendes på:
Denne CSS-regel deaktiverer den standard understregede tekstdekoration for dette ene link. Det ændrer dog ikke noget andet link på siden. Dette er en af begrænsningerne ved indbyggede stilarter. Da de kun ændrer sig på et bestemt element, skal du strø din HTML med disse stilarter for at opnå et samlet sidedesign. Det er ikke en bedste praksis: Det er faktisk et skridt fjernet fra dagene i skrifttype tags og blanding af struktur og stil på websider.
Inline-stilarter kræver også meget høj specificitet. Dette gør dem svære at overskrive med andre ikke-integrerede stilarter. For eksempel, hvis du vil gøre et websted lydhørt og ændre, hvordan et element ser på bestemte brudpunkter ved hjælp af medieforespørgsler, indbyggede stilarter på et element gør det svært at gøre.
Inline-stilarter er kun passende, når du bruger dem sparsomt i tilgangen "undtagelse fra reglen", der afskærer et eller to elementer fra deres kammerater på siden.
Indlejrede stilarter
Indlejrede stilarter findes i dokumentets hoved. De er indkapslet tags og ligner meget eksterne CSS-filer inden for den del af dokumentet.
Indlejrede stilarter påvirker kun tags på den side, de er indlejret i. Endnu en gang ophæver denne tilgang en af styrkerne ved CSS. Da hver side har stilarter, der er defineret i overskriften, hvis du vil foretage en ændring på hele webstedet - som at ændre farve af links fra rød til grøn - du skal foretage denne ændring på hver side, da hver side bruger en indlejret stil ark. Denne tilgang er bedre end inline-stilarter, men stadig problematisk i mange tilfælde.
Stilark, der føjes til hovedet på et dokument, tilføjer også en betydelig mængde markeringskode til den side, hvilket også kan gøre siden sværere at administrere i fremtiden.
Fordelen ved indlejrede typografiark er, at de indlæses straks med selve siden i stedet for at kræve, at andre eksterne filer indlæses. Denne teknik kan være en fordel ved et downloadhastigheds- og ydeevneperspektiv.
Eksterne stilark
De fleste websteder bruger i dag eksterne stilark. Eksterne stilarter er stilarter, der er skrevet i et separat dokument og derefter vedhæftet til forskellige webdokumenter. De kaldes ind i hoveddokumentet ved hjælp af en tag i dokumentets hoved. Eksterne typografiark kan enten være på samme server som HTML, eller de kan trækkes helt ind fra en anden server. Dette er ofte tilfældet med aktiver, som skrifttyper, som mange websteder låner fra Google.
Eksterne stilark påvirker ethvert dokument, de er knyttet til, hvilket betyder, at hvis du har et 20-siders websted, hvor hver side bruger det samme typografiark (dette er typisk, hvordan det gøres), du kan foretage en visuel ændring af hver af disse sider ved blot at redigere den ene stil ark. Denne økonomi gør langsigtet webstedsadministration meget lettere.
De fleste professionelle webdesignere bruger en primær CSS-fil til at styre et websteds layout og design.
Ulempen ved eksterne stilark er, at de kræver sider for at hente og indlæse disse eksterne filer. Ikke alle sider bruger alle typografier i CSS-arket, så mange sider indlæser en meget større CSS-side, end den faktisk har brug for.
Selvom det er rigtigt, at der er et præstationshit for eksterne CSS-filer, kan det bestemt minimeres. Realistisk set er CSS-filer kun tekstfiler, så de er ikke store til at begynde med. Hvis hele dit websted bruger en enkelt CSS-fil, får du også fordelen ved, at dokumentet caches, efter at det oprindeligt blev indlæst, hvilket betyder, at der kan være et let præstationshit på den første side for nogle besøg, men efterfølgende sider bruger den cachelagrede CSS-fil, så ethvert hit vil være negeret.