Cascade Layers i praksis

Hvorfor cascade layers?

I større CSS-kodebaser opstår, der ofte “specificity wars”, hvor udviklere skriver mere og mere specifikke selectors for at få deres regler til at vinde.

I følgende eksempel, kan du se, hvordan forskellige regler kæmper om at style det samme element:

/* Lav specificity, 0.0.1 */
input {
  border: 1px solid gray;
}
/* Høj specificity, 0.1.1 */
input[type="text"] {
  border: 2px solid red;
}
/* Endnu højere specificity, 0.2.2 */
form .input-wrapper input[type="text"] {
  border: 3px solid green;
}

Du kan udregne effekten af en selector her: Specificity calculator

Med layers flytter du fokus fra selector-styrke til bevidst prioritering. Det giver færre “specificity wars” og mere forudsigelig styling.

Fra cascade til layer-tænkning

I stedet for at skrive tungere selectors for at “vinde”, kan du lægge regler i forskellige lag:

@layer reset, components;

@layer reset {
  input[type="text"] {
    border: 1px solid gray;
  }
}

@layer components {
  .my-input {
    border: 4px solid blue;
  }
}

Her kan en simpel klasse i components stadig vinde over en mere kompleks selector i reset, fordi lag-ordenen er deklareret.

Deklarer layer-order oppefra

Et godt mønster er at deklarere den samlede lag-rækkefølge først:

@layer reset, global, components, utilities;

Så bliver det tydeligt for alle, hvad der vinder over hvad. Det er især nyttigt, når flere filer og flere personer bidrager til samme CSS.

Et projekt-stack af layers

Der er ikke rigtigt etableret best practices for lag-navne, men en pragmatisk standard kunne se sådan ud:

@layer reset, global, components, utilities;

• reset: baseline og normalisering
• global: generelle element-regler og tokens
• components: komponent-specifik styling
• utilities: små override-klasser med højeste prioritet

Layers i praksis

Du kan kombinere tildelingen af lag med imports af forskellige CSS-filer:

@layer reset, global, components, utilities;

@import "./reset.css" layer(reset);
@import "./utils.css" layer(utilities);

Det gør det let at holde struktur, selv når styles kommer fra flere filer.

Demoer

I denne demo kan du se, hvordan lag-ordenen påvirker, hvilke regler der vinder uanset, hvor høj specificity er i lavere lag eller rækkefølgen af regler.

I denne demo kan du se, hvordan en reset-regel i et lavere lag kan blive overtrumfet af en simpel klasse i et højere lag, uden at skulle skrive en mere specifik selector, hvilket gør styling mere forudsigeligt og nemmere at vedligeholde.