decalibration.net

Manglende local scope i CSS blir ofte sett på som problematisk. Alle CSS-regler du skriver kan potensielt berøre flere DOM-elementer enn det du tenkte i utgangspunktet. Og motsatt, du har ikke kontroll på hvilken eksisterende CSS som påvirker DOM-elementet du jobber med.

Kan bruk av CSS-moduler gjøre jobben til utviklere enklere? I denne artikkelen ser jeg på hvordan CSS-moduler kan brukes sammen med React, og hvilke fordeler og ulemper dette fører med seg.

CSS-moduler

Kort om prinsippet bak CSS-moduler.

CSS skrives på vanlig måte i en CSS-fil. (Eksempel)
Filen importeres på en spesiell måte i React-komponenten. (Eksempel)
Klassenavnet får en styles-prefiks i JSX-koden. (Eksempek)
Når applikasjonen bygges genereres det prefiks og appendiks på klassenavnet.

CSS-moduler er ikke en del av CSS-standarden, men er noe som diskuteres. (Finn kilde)

Effekter

Det obskøne klassenavnet gjør det mindre sannsynlig at stilreglene skal påvirke andre DOM-elementer enn den spesifikke komponenten du jobber med.

Komponenten arver derimot stil fra det omkransende DOM-elementet, for eksempel informasjon om farge, størrelse og font-face. Elementet vil ikke være isolert fra resten av HTML-dokumentet.

Dette er en bra ting. De fleste komponenter skal være sømløst integrert i resten av nettstedet, og se likedan ut.

Lokal scope

For de tilfellene hvor det er nødvendig å ha full kontroll på utseendet. Sosiale widgets, som Tweets, Instagram-innlegg og kommentarfelt?

Iframe har lenge vært en løsning, Nå holder webcomponents også på å modnes. I disse tilfellene er DOMen uavhengig av dokumentet komponenten er inkludert i.

Kodeklarhet

CSS modules løser ikke alle problemer, men er det noen ulemper med å ta det i bruk?

Kodeeksempel, vanlig: DOM, JSX, CSS.

Kodeeksempel, med CSS modules. DOM, JSX, CSS.

I det første eksempelet brukes det samme navn tre steder. I det siste eksempelet brukes tre forskjellige skrivemåter.

Under utvikling er nok ikke dette et stort problem, men ved eventuell debugging og videreutvikling trengs det ekstra mental kapasitet for å oversette mellom tre ulike notasjoner. Spesiell om en ny utvikler skal overta kodebasen.

CSS modules er i tillegg et ekstra abstraksjonsnivå.

Avslutningsvis

Ved å bruke CSS-moduler er det mindre sannsynlig at CSS-reglene dine skal påvirke andre DOM-elementer, men hvor stort problem er dette i utgangspunktet?

CSS-moduler fjerner ikke behovet for å skrive strukturert CSS, og kodekonvensjoner som BEM bidrar til å minimere dette problemet.

Lettlest og klar kode er viktigere enn den lille gevinsten du får ved å bruke CSS modules.

Bakgrunn

Elementet center er utdatert, og har for lenge siden blitt erstattet med nyere begrep. Et utdatert element støttes fremdeles i nettleserne, men bare for bakoverkompatibilitet. Sjansene er store for at slike element senere utgår, uten noen form for definisjon i spesifikasjonene eller nettleserstøtte. I denne artikkelen vil de nyere metodene for sentrering bli gjennomgått.

En måte som ofte er brukt, er tilsettelse av align="center" i p eller i andre element som inneholder tekst eller bilder. Dette er også en delvis utdatert metode, som har blitt erstattet av CSS-egenskapen text-align.

Men, her er det også noen unntak ute og går. Det finnes nemlig flere versjoner av HTML, såkalte DOCTYPE-deklarasjoner, som forteller hvordan nettleseren skal tolke dokumentet. «Strict» er den doctypen som anbefales av W3C, og inneholder færre HTML-attributer enn «Transitional». Noen opplever Strict som en strengere og vanskeligere doctype enn Transitional, siden det er nødvendig å bruke CSS på steder man tidligere skrev attributer rett inn i HTML-taggene. Dette bør dog ikke by på noen problemer, hvis man er innstilt på å få en ryddig kode med all CSS adskilt i et eget dokument. align er blant attributtene som valideres i Transitional, men ikke i Strict.

Sentrering av tekst

For å sentrere tekst, bilder eller annet inline-innhold, legges text-align: center; til det elementet som innholdet står innenfor. I eksemplet nedenfor vil tekst innenfor et bestemt avsnitt bli sentrert.

p {
  text-align: center;
}

<p>
  Denne teksten står midt inne i avsnittet.<br>
  Det gjør også denne!<br>
</p>

Sentrering av blokker

Siden text-align bare gjelder for inline-innhold, brukes det en annen metode for å få blokkelement stående midt på siden. Blokkelement tar vanligvis opp all tilgjengelig plass i bredden, så det må angis width for å få noe resultat. For å få elementet til å ha lik margin til høyre og venstre side, bruker vi CSS-egenskapen margin med verdien auto.

p.blokktekst {
  width: 300px;
  margin: 0 auto;
}

Når det er oppgitt 2 verdier etter margin, gjelder den første verdien for de begge vertikale sidene, og den andre verdien for de begge horisontale.

<p class="blokktekst">
  Denne teksten står inne i en boks som står midt på siden.<br>
  Og er venstrejustert inne i boksen!
</p>

Denne metoden kan brukes til å sentrere et bilde også, ved å angi at bildet skal oppføre seg som et blokkelement ved hjelp av CSS-egenskapen display.

img.blokk {
  display: block;
  margin: 0 auto;
}

<img class="blokk" src="..." alt="...">

Flere har problemer med å få denne metoden til å funke i Internet Explorer 6, på grunn av en feil DOCTYPE-deklarasjon. For at den skal aktiveres i Internet Explorer, må den plasseres helt øverst i dokumentet, uten tegn eller mellomrom over seg. For noen DOCTYPE-deklarasjoner kreves det i tillegg en URI, for at nettleseren ikke skal gå i «quirk-mode». En oversikt over hvordan DOCTYPE-deklarasjonene skal se ut er alltid nyttig å ha.

Nettleserstøtte

Internet Explorer 5 for Windows klarer ikke svare på denne metoden, og boksen/bildet vil ikke bli sentrert likevel. En svakhet til nettleseren, men ikke til metoden.

Det finnes en omvei, som kan tas for å få den til å virke i eldre nettlesere også. text-align: center; vil nemlig i tillegg til å sentrere tekst, også sentrere blokkelement i den gjeldende nettleseren; men her er det også en bakdel. Alle element innenfor elementet med den angitte verdien, arver den samme egenskapen og vil sentrere tekst som vi i utgangspunktet ikke vil ha sentrert. Dette fører til at det må legges til text-align: left; i de elementene vi ikke vil ha sentrert tekst.

body {
  text-align: center;
}

p.blokktekst {
  width: 300px;
  margin<: 0 auto;
  text-align: left;
}

<p class="blokktekst">
  Denne teksten står inne i en boks som står midt på siden.<br>
  Og er venstrejustert inne i boksen!<br>
</p>