Forstå de 3 typene CSS-stiler
Innebygde, innebygde og eksterne stilark: Her er det du trenger å vite
Front-end nettstedutvikling er ofte representert som en trebent krakk som består av:
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 presenterer unike fordeler og ulemper.
hardik pethani / Getty Images
Inline stiler
Innebygde stiler er stiler som er skrevet direkte i taggen i HTML-dokumentet. Innebygde stiler påvirker bare den spesifikke taggen de brukes på:
|_+_|
Denne CSS-regelen deaktiverer standard understrekingstekstdekorasjon for denne ene lenken. Det vil imidlertid ikke endre noen annen kobling på siden. Dette er en av begrensningene til innebygde stiler. Siden de bare endres på et spesifikt element, må du fylle HTML-koden med disse stilene for å oppnå en enhetlig sidedesign. Det er ikke en beste praksis: Faktisk er det ett skritt fjernet fra dagene til font koder og blanding av struktur og stil på nettsider.
Inline stiler krever også svært høy spesifisitet. Dette gjør dem vanskelige å overskrive med andre stiler som ikke er innebygde. For eksempel hvis du ønsker å gjøre et nettsted responsivt og endre hvordan et element ser ut på bestemte bruddpunkter ved å bruke medieforespørsler , innebygde stiler på et element gjør dette vanskelig å gjøre.
Innebygde stiler er bare passende når du bruker dem sparsomt, i «unntak fra regelen»-tilnærmingen som skiller ett eller to elementer fra sine jevnaldrende på siden.
Innebygde stiler
Innebygde stiler ligger i hodet på dokumentet. De er innkapslet koder og ser omtrent ut som eksterne CSS-filer i den delen av dokumentet.
Innebygde stiler påvirker bare taggene på siden de er innebygd i. Denne tilnærmingen opphever nok en gang en av styrkene til CSS. Siden hver side har stiler definert i overskriften, hvis du ønsker å gjøre en endring for hele nettstedet – som å endre fargen på lenker fra rød til grønn – må du gjøre denne endringen på hver side, siden hver side bruker en innebygd stil ark. Denne tilnærmingen er bedre enn innebygde stiler, men fortsatt problematisk i mange tilfeller.
|_+_|Stilark som legges til oversiden av et dokument, legger også til en betydelig mengde markup-kode til 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 å kreve at andre eksterne filer lastes. Denne teknikken kan være en fordel fra et 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 legges til ulike nettdokumenter. De kalles inn i hoveddokumentet ved hjelp av en tag i hodet på dokumentet. Eksterne stilark kan enten ligge på samme server som HTML-en, eller de kan trekkes helt inn fra en annen server. Dette er ofte tilfellet med eiendeler, som fonter, 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 20-siders nettsted der hver side bruker det samme stilarket (dette er vanligvis hvordan det gjøres), kan du gjøre en visuell endring på hver av disse sidene ved å ganske enkelt redigere det ene stilarket. Denne økonomien gjør langsiktig nettstedadministrasjon mye enklere.
|_+_|De fleste profesjonelle webdesignere bruker en primær CSS-fil for å styre et nettsteds layout og design.
Ulempen med eksterne stilark er at de krever sider for å hente og laste disse eksterne filene. Ikke hver side vil bruke hver stil i CSS-arket, så mange sider vil laste inn en mye større CSS-side enn den 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 bufres etter at det først er lastet inn, noe som betyr at det kan være et lite ytelsestreff på den første siden for noen besøk, men påfølgende sider vil bruke bufret CSS-fil, så ethvert treff vil bli negert.