Hva er CSS? Cascading Style Sheets, Responsive CSS, Sassy CSS, Compress, Minify, Unminify, Uncompress Tool

Hva er Cascading Style Sheets (CSS)?

Douglas Karr Torsdag februar 9, 2023

1 109 4 minutter leses

Les nedenfor for en fullstendig forklaring på hvordan overlappende stilark fungerer. Vi viser appene våre øverst på siden slik at de er enkle å finne og bruke. Hvis du leser denne artikkelen via e-post eller feed, klikk deg videre til komprimere CSS.

Med mindre du faktisk utvikler nettsteder, kan det hende du ikke fullt ut forstår gjennomgripende stilark (CSS). CSS er et stilarkspråk som brukes til å beskrive utseendet og formateringen av et dokument skrevet i HTML or XML. CSS kan brukes til å spesifisere stilene for ulike elementer som font, farge, avstand og layout. CSS lar deg skille presentasjonen av HTML-dokumentet fra innholdet, noe som gjør det enklere å vedlikeholde og oppdatere den visuelle stilen til nettstedet ditt.

CSS språkstruktur

De velger er HTML-elementet du vil style, og eiendom og verdi definer stilene du vil bruke på det elementet:

selector {
  property: value;
}

For eksempel vil følgende CSS gjøre alt <h1> elementer på en side har en rød farge og en skriftstørrelse på 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

Produksjon

Overskrift

Du kan også spesifisere CSS for en unik ID på et element:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Produksjon

Intro

Eller bruk en klasse på tvers av flere elementer:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Produksjon

Jeg vil utheve et ord i span-taggen.

Du kan inkludere CSS i HTML-dokumentet ditt på tre måter:

Inline CSS, ved å bruke style attributt på et HTML-element

Intern CSS, ved hjelp av en <style> element i <head> av HTML-dokumentet ditt
Ekstern CSS, ved hjelp av en separat .css-fil koblet til HTML-dokumentet ditt ved hjelp av <link> element i <head> av HTML-dokumentet ditt

Responsiv CSS

CSS er utrolig fleksibel og kan brukes til å justere visningen av elementer basert på skjermoppløsning, slik at du kan ha samme HTML men bygge den responsive til enhetens oppløsning:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS-komprimering

Du kan se i eksemplet ovenfor at det er en kommentar, en medieforespørsel og flere stiler som bruker mellomrom og linjeinnmating for å organisere visningen av CSS. Det er en god praksis å forminske eller komprimere CSS-en din på nettstedet ditt for å redusere filstørrelser og, deretter, tiden det tar å be om og gjengi stilen din. Det er ikke et lite beløp ... du kan se over 50 % besparelser på noen av eksemplene ovenfor.

Mange serverkonfigurasjoner tilbyr verktøy som automatisk vil komprimere CSS i farten og hurtigbufre den forminskede filen slik at du ikke trenger å gjøre det manuelt.

Hva er SCSS?

Snill CSS (SCSS) er en CSS-forprosessor som legger til ekstra funksjonalitet og syntaks til CSS-språket. Den utvider mulighetene til CSS ved å tillate bruk av variabler, mixins, funksjoner og andre funksjoner som ikke er tilgjengelige i standard CSS.

SCSS fordeler

Forbedret vedlikehold: Med bruk av variabler kan du lagre verdier på ett sted og gjenbruke dem i hele stilarket, noe som gjør det enklere å vedlikeholde og oppdatere stilene dine.
Bedre organisering: Med mixins kan du gruppere og gjenbruke sett med stiler, noe som gjør stilarket ditt mer organisert og lettere å lese.
Økt funksjonalitet: SCSS inkluderer mange funksjoner som ikke er tilgjengelige i standard CSS, for eksempel funksjoner, kontrollstrukturer (f.eks. if/else) og aritmetiske operasjoner. Dette gir mer dynamisk og uttrykksfull styling.
Bedre ytelse: SCSS-filer kompileres til CSS, noe som kan forbedre ytelsen ved å redusere mengden kode som må analyseres av nettleseren.

SCSS Ulemper

Læringskurve: SCSS har en annen syntaks enn standard CSS, og du må lære deg denne nye syntaksen før du kan bruke den effektivt.
Ytterligere kompleksitet: Selv om SCSS kan gjøre stilarket mer organisert og enklere å vedlikeholde, kan det også introdusere ekstra kompleksitet i kodebasen, spesielt hvis du ikke er kjent med de nye funksjonene og syntaksen.
Verktøy: For å bruke SCSS, trenger du en kompilator for å oversette SCSS-koden til CSS. Dette krever ytterligere oppsett og verktøy, noe som kan være en barriere for inngang for enkelte utviklere.

I dette eksemplet nedenfor bruker SCSS-koden variabler for å lagre verdier ($primary-color og $font-size) som kan gjenbrukes i hele stilarket. CSS-koden som genereres fra denne SCSS-koden er ekvivalent, men den inkluderer ikke variablene. I stedet brukes verdiene til variablene direkte i CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

En annen funksjon ved SCSS som er demonstrert i dette eksemplet er nestede stiler. I SCSS-koden er h1 stiler er nestet i body stiler, noe som ikke er mulig i standard CSS. Når SCSS-koden er kompilert, utvides de nestede stilene til separate stiler i CSS-koden.

Totalt sett gir SCSS mange fordeler i forhold til standard CSS, men det er viktig å vurdere avveiningene og velge riktig verktøy for prosjektet ditt basert på dine behov og begrensninger.