SASS en BEM

Dit artikel legt SASS en BEM uit.

We leggen de concepten en implementatiemethoden uit om de verwarring en kwetsbaarheid die vaak ontstaan bij grootschalige CSS te voorkomen, aan de hand van SASS en BEM met concrete voorbeelden.

YouTube Video

SASS en BEM

Naarmate het aantal bestanden en schermen toeneemt, krijgt CSS vaak te maken met problemen zoals 'Ik weet niet waar deze stijl is gedefinieerd' en 'Een kleine wijziging heeft het uiterlijk op een ander scherm kapotgemaakt.'.

Dit komt doordat CSS van nature een taal is die ontwerpregels niet afdwingt. Als je blijft schrijven zoals je doet, nemen de onbedoelde afhankelijkheden toe.

SASS en BEM zijn praktische technieken om CSS te transformeren van iets wat je ad hoc schrijft naar iets wat je ontwerpt en beheert, zodat je dergelijke problemen voorkomt. Door beide te combineren, kun je de betekenis van stijlen verduidelijken en tegelijkertijd de leesbaarheid, herbruikbaarheid en onderhoudbaarheid verbeteren.

Redenen waarom CSS snel onbeheerbaar wordt

CSS zoals het volgende kan moeilijk te begrijpen zijn hoe het zich gedraagt wanneer je later naar de code kijkt.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• In dit voorbeeld ziet dezelfde .title-klasse er anders uit afhankelijk van waar deze geplaatst is, waardoor je niet direct kunt zien welke stijl op deze .title wordt toegepast.
• Op deze manier, naarmate selectors dieper en meer afhankelijk van ouder-elementen worden, wordt het moeilijker om de reikwijdte van invloed te voorspellen en wordt CSS gevoeliger voor fouten bij wijzigingen.

BEM is een naamgevingsconventie die 'rollen uitdrukt via namen'

BEM staat voor Block / Element / Modifier en bevat in de naam welk component de klasse vertegenwoordigt en in welke staat deze zich bevindt.

• Block is een onafhankelijk component.
• Element is een intern element van het Block.
• Modifier staat voor een staat of variant.

1.card {}
2.card__title {}
3.card--highlighted {}

Met deze naamgeving kun je de structuur en rol afleiden door alleen naar de HTML te kijken.

Basisvorm van HTML met BEM

Hier is een voorbeeld van een kaart-UI in HTML met BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Uit alleen de klasse-namen kun je begrijpen dat dit een 'card-component' is, een 'title daarin', en de 'benadrukte staat'. Dit is het grootste voordeel van BEM.

Toch kan BEM op zichzelf leiden tot omslachtige CSS.

Als je BEM zo in CSS schrijft, neemt de hoeveelheid code vaak toe.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Hierdoor kun je met SASS georganiseerde code schrijven die de structuur behoudt.

Druk BEM op natuurlijke wijze uit met SASS-nesting

Met SASS-nesting kun je de structuur van BEM direct in je code weerspiegelen.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& verwijst naar de ouder-selector en werkt erg goed met BEM-naamgeving.

CSS gegenereerd uit deze SASS

De bovenstaande SASS wordt gecompileerd tot CSS zoals het volgende.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Hoewel het uiterlijk hetzelfde is, wordt de cognitieve belasting voor de ontwikkelaar aanzienlijk verminderd.

Ontwerpen voor het veilig gebruik van Modifiers

Omdat Modifiers in BEM 'staten' vertegenwoordigen, is het belangrijk om ze te beperken tot gebruik voor overrides.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Ontwerp wordt stabieler als Modifiers niet als 'toevoegingen' maar als 'wijzigingen' worden behandeld.

Beperk het nesten van elementen tot één niveau

Bij BEM is het belangrijk om elementen niet te diep te nesten.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Meerdere niveaus zoals .card__header__title zijn een teken dat je moet overwegen het Block te splitsen.

Een voorbeeld van SASS-bestandsstructuur

Tot slot hier een voorbeeld van een SASS-structuur die praktisch is voor echte projecten.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Als je elk component beheert als 1 block = 1 bestand, is de kans kleiner dat het kapot gaat.

Voorbeeld van card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Omdat alles op dit niveau zelfstandig is, wordt verwijderen, verplaatsen en hergebruik eenvoudig.

Samenvatting

SASS en BEM zijn niet alleen trendy technieken—het zijn praktische benaderingen om CSS tot ontwerpbare code te maken.

• BEM benoemt de betekenis en rol.
• SASS maakt eenvoudig schrijven mogelijk met behoud van structuur.
• Het combineren van beide maakt CSS minder gevoelig voor fouten.

Laten we de CSS vandaag schrijven op een manier die je toekomstige zelf begrijpt.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video