CSS namnsättning

Styleguiden namnsätter CSS-klasser enligt namnsättningsstandaren BEM som står för block, element och modifier. BEM gör det enkelt att få en konsekvent namnstruktur som går att underhålla, som upprätthåller klassens specificitet och som gör det möjligt att återanvända delar av komponenter. Styleguiden har dessutom prefix för att definiera kategorier och responsivitet.

Block

Blocknamnet identifierar och beskriver syftet med komponenten.

Exempelvis har komponenten kort blocknamnet card:

<div class=”card”></div>

Element

Elementet beskriver delarna i komponenten. Elementnamnet är separerat från blocknamnet med dubbla understreck.

Ett kort med en rubrik och innehåll är till exempel:

</div>

Modifier

Modifieraren ändrar standardutseendet eller beteendet för blocket eller elementet. Den är separerad från blocket eller elementet med dubbla streck.

Exemplet visar ett kort för en webbplats med en kompakt rubrik:

<div class=”card card--homepage”

</div>

Prefix för att visa kategori

Styleguiden använder prefix för att kategorisera olika block. De olika prefixen är:

c- för komponent
e- för element
o- för objekt
u- för utility
l- för layout

Exempel som visar att ett kort är kategoriserat som en komponent:

</div>

Prefix för responsivitet

För att underlätta hanteringen av en komponent eller layout på olika skärmstorlekar finns det prefix för responsivitet. De olika prefixen är:

md: besrkiver hur det presenteras på alla surfplattor och uppåt
lg: beskriver hur det presenteras på desktops och uppåt

Finns det inget prefix till klassnamnet så påverkar det hur det presenteras på alla skärmstorlekar.

Exemplet visar en grid som har fyra kolumner på stora skärmar, två kolumner på surfplatta och en kolumn på mobil:

<p>Content A</p>

<p>Content A has a child</p>

</div>

Mer information

Här hittar du länkar till mer information om BEM och prefix inom CSS.