SASS og BEM

Denne artikel forklarer SASS og BEM.

Vi forklarer begreberne og implementeringsmetoderne til at forhindre forvirring og skrøbelighed, som ofte opstår, når CSS bliver stor, ved hjælp af SASS og BEM, med konkrete eksempler.

YouTube Video

SASS og BEM

Når antallet af filer og skærme stiger, har CSS en tendens til at få problemer såsom 'jeg ved ikke, hvor denne stil er defineret' og 'bare en lille ændring ødelagde udseendet på en anden skærm.'.

Dette skyldes, at CSS grundlæggende er et sprog, der ikke håndhæver designregler. Hvis du fortsætter med at skrive på denne måde, vil utilsigtede afhængigheder vokse.

SASS og BEM er praktiske teknikker, der forvandler CSS fra noget, du skriver tilfældigt, til noget, du designer og administrerer, hvilket forhindrer sådanne problemer. Ved at kombinere de to kan du tydeliggøre betydningen af styles og samtidig forbedre læsbarhed, genbrugelighed og vedligeholdelse.

Grunde til at CSS let bliver uoverskuelig

Sådan CSS som følgende kan blive svær at forstå, hvordan den opfører sig, når du ser tilbage på koden senere.

 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}

• I dette eksempel ser den samme .title-klasse forskellig ud, afhængigt af hvor den er placeret, så du kan ikke straks se, hvilken stil der bliver anvendt på denne .title.
• På denne måde bliver det, efterhånden som selektorer bliver dybere og mere afhængige af forældre-elementer, vanskeligere at forudse CSS'ens rækkevidde og nemmere at ødelægge ting, når du ændrer noget.

BEM er en navngivningskonvention, der 'udtrykker roller gennem navne'

BEM står for Block / Element / Modifier og inkluderer i navnet, hvilken komponent klassen repræsenterer, og hvilken tilstand den er i.

• Block er en selvstændig komponent.
• Element er et indre element af blokken.
• Modifier står for en tilstand eller variation.

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

Med denne navnekonvention kan du forstå struktur og rolle bare ved at se på HTML'en.

Grundlæggende form for HTML med BEM

Her er et eksempel på et kort-UI udtrykt i HTML med BEM.

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

Bare ud fra klassenavnene kan du forstå, at dette er en 'card-komponent', 'title indeni' og den 'fremhævede tilstand'. Dette er den største fordel ved BEM.

Dog kan BEM alene føre til meget omfangsrig CSS.

Hvis du skriver BEM direkte i CSS, har mængden af kode en tendens til at vokse.

 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}

Her kan du med SASS få organiseret kode, der bevarer strukturen.

Udtryk BEM naturligt med SASS-indlejring

Ved at bruge SASS-indlejring kan du afspejle BEM-strukturen direkte i din kode.

 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}

& refererer til forældre-selektoren og fungerer rigtig godt sammen med BEM-navngivning.

CSS genereret fra denne SASS

Ovenstående SASS bliver kompileret til CSS som følgende.

 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}

Selvom udseendet er det samme, bliver den kognitive belastning for udvikleren markant reduceret.

Design for sikker brug af Modifiers

Da Modifiers i BEM repræsenterer 'tilstande', er nøglen at begrænse dem til brug for 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}

Designet bliver mere stabilt, hvis modifiers behandles ikke som 'tilføjelser', men som 'ændringer'.

Begræns Element-indlejring til ét niveau

I BEM er det vigtigt ikke at indlejre elementer for dybt.

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

Flerniveaus-elementer som .card__header__title er et tegn på, at du bør overveje at opdele blokken.

Et eksempel på SASS-filstruktur

Til sidst er her et eksempel på en SASS-struktur, der er praktisk til virkelige projekter.

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

Hvis du håndterer hver komponent som 1 blok = 1 fil, går tingene sjældnere i stykker.

Eksempel på 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}

Fordi alt er afgrænset i denne enhed, bliver sletning, flytning og genbrug let.

Sammendrag

SASS og BEM er ikke blot moderne teknikker – de er praktiske tilgange til at gøre CSS til designbar kode.

• BEM navngiver betydning og rolle.
• SASS gør det let at skrive og samtidig bevare strukturen.
• Kombination af begge gør CSS mindre udsat for at gå i stykker.

Lad os skrive CSS'en i dag på en måde, som dit fremtidige jeg kan forstå.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video