CSS - Kaskade og Boksmodell
For å mestre CSS må du forstå to fundamentale prinsipper som styrer alt på nettsiden: Kaskadeprinsippet (hvordan nettleseren løser stil-konflikter og prioriterer regler) og Boksmodellen (hvordan hvert eneste element beregner sin plass, luft og ramme).
1. Hva betyr "Cascading" (Kaskadeprinsippet) i SvelteKit?
Ordet Cascading oversettes til kaskade eller et trinnvis fossefall. I CSS betyr dette at stilregler flyter nedover, og hvis flere regler prøver å style det samme HTML-elementet, bruker nettleseren et strengt sett med regler for å avgjøre hvilken stil som vinner.
De 3 nivåene av CSS i et SvelteKit-prosjekt
I et moderne SvelteKit-prosjekt deler vi koden inn i tre distinkte lag. Hvor du plasserer stilen avgjør hvor tilgjengelig den er, og hvor høyt den prioriteres:
Felles stilark for hele appen
Ligger i src/app.css og importeres i +layout.svelte med import "../app.css";.
// I +layout.svelte:
import "../app.css";- ✔ Definerer CSS-variabler (fargetemaer), fonter og globale reset-regler.
- ✔ Gjelder for absolutt alle sider og komponenter i prosjektet.
Innebygd i .svelte-filer
Skrives i <style> nederst i +page.svelte eller komponenter. Har automatisk scoping!
<style>
p { color: #a855f7;
}
</style>- ✔ Isolert: Svelte legger på unike klasser slik at stiler aldri lekker ut til andre sider!
- ✔ Kan overstyre globale stiler lokalt for akkurat denne komponenten.
Direkte på taggen med reaktivitet
I Svelte brukes inline-stiler for å koble CSS direkte til
tilstandsvariabler ($state).
<p style="color: {aktivFarge};">
<!-- Eller Svelte-direktiv: -->
<p style:color={aktivFarge}>- ✔ Perfekt for verdier som endrer seg ved brukerinteraksjon eller animasjoner.
- ✖ Overstyrer alt annet, så skal kun brukes til dynamiske verdier.
2. Prioritetsstigen i SvelteKit (Hvem vinner stilen?)
Når globale stiler fra app.css, lokale stiler fra
komponentens <style> og inline-stiler møtes, vurderer
nettleseren reglene etter denne prioritetsstigen (fra høyest til lavest):
!important Tvangs-overstyring uansett nivå. Gjør koden vanskelig å feilsøke og bør nesten alltid unngås.
style="..." eller style:prop={...}) Stil skrevet direkte på HTML-taggen i komponenten, ofte bundet til reaktiv tilstand.
#min-id) Svært spesifikk regel for et unikt element.
.min-klasse) & pseudo-klasser Standard måte å style gjenbrukbare elementgrupper på.
<style> i .svelte) Generell styling for tagger (f.eks. p, h1) inni komponenten. Sveltes scoping gjør at
den kun treffer her.
src/app.css) Felles baseregler definert for hele nettstedet.
Standardstilene nettleseren har innebygd (f.eks. standard marger og font-størrelser).
3. CSS Boksmodellen (The Box Model)
I CSS er hvert eneste HTML-element en usynlig
rektangulær boks. Enten det er en overskrift (<h1>),
et avsnitt (<p>), en knapp (<button>) eller en <div>, består boksen av fire konsentriske lag:
Usynlig luft på utsiden av rammen. Dytter naboelementer unna og skaper avstand på siden.
Linjen som omslutter innholdet og paddingen. Kan ha tykkelse,
farge og stil (f.eks. solid, dashed).
Luft på innsiden av rammen, rundt selve innholdet. Får samme bakgrunnsfarge som elementet.
Kjernen i boksen: der teksten, bildet eller videoen vises.
Bestemmes av width og height.
4. Interaktivt Boksmodell-Studio
Juster verdiene nedenfor med gliderne for å se hvordan Margin, Border, Padding og Content jobber sammen i sanntid:
🟠 Margin kommer i tillegg: Margin (48px) er luft på utsiden av rammen. Den påvirker ikke elementets bredde, men skyver naboelementer unna og krever totalt 288px plass på nettsiden.
.min-boks {
box-sizing: border-box;
width: 240px;
height: 90px;
padding: 18px;
border: 6px solid #a855f7;
margin: 24px;
}5. Hvorfor bruke box-sizing: border-box på alt?
I tidlige dager av webben var standarden content-box. Hvis
du lagde en kolonne med width: 50% og la til padding: 20px, ble den totale bredden over 50%, og layouten
brakk i to linjer!
Med border-box forblir elementet nøyaktig den bredden du oppgir.
Padding og border "spiser" av innmaten i stedet for å utvide boksen utover.
Den universelle CSS-tilbakestillingen (CSS Reset):
Nesten alle profesjonelle nettsider og rammeverk inkluderer denne regelen helt øverst i stilarket sitt:
/* Gjør at padding og border alltid inkluderes i bredden */
* {
box-sizing: border-box;
}🗝️ Sentrale Begreper
- Cascading (Kaskade): Prinsippet og reglene nettleseren bruker for å løse konflikter når flere CSS-regler gjelder samme element.
- Spesifisitet (Specificity): "Vektingen" av en CSS-regel. ID (#) veier mer enn klasse (.), som veier mer enn elementnavn (p).
- Boksmodellen (Box Model): Strukturen til alle HTML-elementer, bestående av Content, Padding, Border og Margin.
- Content: Selve innholdet (tekst, bilde osv.) med
definert
widthogheight. - Padding: Luft på innsiden av rammen mellom innhold og border.
- Border: Rammen/kantlinjen som omslutter innholdet og paddingen.
- Margin: Luft på utsiden av rammen som skaper avstand til andre elementer.
- box-sizing: border-box: Egenskap som sikrer at padding og rammer inkluderes i elementets totale bredde og høyde.