Front-end nettstedsutvikling blir ofte representert som en trebenet krakk som består av:
- HTML for strukturen til et nettsted
- CSS for de visuelle stilene
- Javascript for atferd
Den andre delen av denne krakken, Cascading Style Sheets, støtter tre forskjellige stiler du kan legge til et dokument.
- Inline-stiler
- Innebygde stiler
- Eksterne stiler
Hver av disse CSS-stilene gir unike fordeler og ulemper.
Inline Styles
Inline-stiler er stiler som skrives direkte i koden i HTML-dokumentet. Integrerte stiler påvirker bare den spesifikke taggen de brukes på:
Denne CSS-regelen deaktiverer standard dekorert tekstdekorasjon for denne ene lenken. Det vil imidlertid ikke endre noen annen lenke på siden. Dette er en av begrensningene ved innebygde stiler. Siden de bare endres på et bestemt element, må du kaste HTML-en din med disse stilene for å oppnå et enhetlig sidedesign. Det er ikke en best praksis: Det er faktisk et skritt fjernet fra dagene av font tagger og innblanding av struktur og stil på websider.
Inline-stiler krever også veldig høy spesifisitet. Dette gjør dem vanskelig å overskrive med andre, ikke-innebygde stiler. For eksempel hvis du vil gjøre et nettsted responsivt og endre hvordan et element ser på bestemte brytpunkter ved hjelp av mediespørsmål, innebygde stiler på et element gjør dette vanskelig å gjøre.
Inline-stiler er bare passende når du bruker dem sparsomt, i "unntak fra regelen" -tilnærmingen som skiller ett eller to elementer fra sine likemenn på siden.
Innebygde stiler
Innebygde stiler ligger i hodet på dokumentet. De er innkapslet tagger og ser ut som eksterne CSS-filer i den delen av dokumentet.
Innebygde stiler påvirker bare taggene på siden de er innebygd i. Nok en gang negerer denne tilnærmingen en av styrkene til CSS. Siden hver side har stiler som er definert i overskriften, hvis du vil gjøre en endring på hele området - som å endre fargen av koblinger fra rødt til grønt - du må gjøre denne endringen på hver side, siden hver side bruker en innebygd stil ark. Denne tilnærmingen er bedre enn innebygde stiler, men fremdeles problematisk i mange tilfeller.
Stilark som legges til hodet på et dokument, legger også til en betydelig mengde merkekode på den siden, noe som også kan gjøre siden vanskeligere å administrere i fremtiden.
Fordelen med innebygde stilark er at de lastes umiddelbart med selve siden, i stedet for at andre eksterne filer må lastes inn. Denne teknikken kan være en fordel fra nedlastingshastighet og ytelsesperspektiv.
Eksterne stilark
De fleste nettsteder bruker i dag eksterne stilark. Eksterne stiler er stiler som skrives i et eget dokument og deretter festes til forskjellige nettdokumenter. De blir kalt inn i hoveddokumentet ved hjelp av en merket i hodet på dokumentet. Eksterne stilark kan enten ligge på samme server som HTML, eller de kan hentes fra en annen server helt. Dette er ofte tilfelle med eiendeler, som skrifttyper, som mange nettsteder låner fra Google.
Eksterne stilark påvirke ethvert dokument de er knyttet til, noe som betyr at hvis du har et nettsted på 20 sider der hver side bruker samme stilark (dette er vanligvis hvordan det gjøres), du kan gjøre en visuell endring på hver av disse sidene ved å redigere den ene stilen ark. Denne økonomien gjør langsiktig administrering av nettsteder mye enklere.
De fleste profesjonelle webdesignere bruker en primær CSS-fil til å styre nettstedets utforming og design.
Ulempen med eksterne stilark er at de krever sider for å hente og laste disse eksterne filene. Ikke hver side vil bruke alle stilene i CSS-arket, så mange sider vil laste inn en mye større CSS-side enn det faktisk trenger.
Selv om det er sant at det er et ytelsestreff for eksterne CSS-filer, kan det absolutt minimeres. Realistisk sett er CSS-filer bare tekstfiler, så de er ikke store til å begynne med. Hvis hele nettstedet ditt bruker en enkelt CSS-fil, får du også fordelen av at dokumentet blir bufret etter at det ble lastet inn, noe som betyr at det kan være en liten ytelsestreff på den første siden for noen besøk, men påfølgende sider vil bruke den cachede CSS-filen, så ethvert treff vil være negert.