SASS og BEM

Denne artikkelen forklarer SASS og BEM.

Vi vil forklare konseptene og implementeringsmetodene for å forhindre forvirring og skjørhet som ofte oppstår når CSS vokser i omfang, ved hjelp av SASS og BEM, med konkrete eksempler.

YouTube Video

SASS og BEM

Når antallet filer og skjermer øker, får CSS ofte problemer som 'Jeg vet ikke hvor denne stilen er definert' og 'Bare en liten endring ødela utseendet på en annen skjerm.'.

Dette er fordi CSS i seg selv er et språk som ikke håndhever designregler. Hvis du fortsetter å skrive på denne måten, vil utilsiktede avhengigheter øke.

SASS og BEM er praktiske teknikker for å endre CSS fra noe du skriver ad hoc til noe du designer og håndterer, og slik forhindrer slike problemer. Ved å kombinere de to kan du tydeliggjøre betydningen av stilene og samtidig forbedre lesbarhet, gjenbrukbarhet og vedlikeholdbarhet.

Årsaker til at CSS lett blir uhåndterlig

CSS som dette kan bli vanskelig å forstå hvordan oppfører seg når du ser tilbake 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 eksempelet ser den samme .title-klassen forskjellig ut avhengig av hvor den er plassert, så du kan ikke umiddelbart vite hvilken stil som gjelder for denne .title.
• På denne måten, når selektorene blir dypere og mer avhengige av foreldreelementer, blir det vanskeligere å forutsi påvirkningsområdet til CSS og det blir mer utsatt for feil ved endringer.

BEM er en navngivningskonvensjon som 'uttrykker roller gjennom navn'

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

• Block er en uavhengig komponent.
• Element er et internt element i Block.
• Modifier står for en tilstand eller variasjon.

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

Med denne navngivningen kan du forstå struktur og rolle bare ved å se på HTMLen.

Grunnleggende form for HTML som bruker BEM

Her er et eksempel på en kort-UI uttrykt i HTML ved hjelp av BEM.

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

Bare ut fra klassenavnene kan du forstå at dette er en 'card-komponent', 'title inni den' og en 'fremhevet tilstand'. Dette er den største fordelen med BEM.

Men BEM alene kan føre til svært ordrik CSS.

Hvis du skriver BEM direkte i CSS, har koden en tendens til å 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 ved å bruke SASS få organisert kode som opprettholder strukturen.

Uttrykk naturlig BEM med SASS-nesting

Ved å bruke SASS-nesting kan du reflektere strukturen til BEM direkte i koden din.

 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}

& henviser til overordnet selektor og fungerer svært godt med BEM-navngivning.

CSS generert fra denne SASS-en

Den ovennevnte SASS-en kompileres til CSS som dette.

 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}

Selv om utseendet er det samme, er den kognitive belastningen for utvikleren betydelig redusert.

Designe for trygg bruk av Modifiers

Siden Modifiers i BEM representerer 'tilstander', er nøkkelen å begrense dem til å overskrive eksisterende stil.

 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}

Design blir mer stabilt hvis Modifiers behandles ikke som 'tillegg', men som 'endringer'.

Begrens Element-nesting til ett nivå

I BEM er det viktig å ikke nøste elementene for dypt.

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

Fler-nivås elementer som .card__header__title er et tegn på at du bør vurdere å splitte Block.

Et eksempel på SASS-filstruktur

Til slutt, her er et eksempel på en SASS-struktur som er praktisk for virkelige prosjekter.

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 blokk = 1 fil, er det mindre sannsynlig at det går 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 selvstendig i denne enheten, blir sletting, flytting og gjenbruk lett.

Sammendrag

SASS og BEM er ikke bare trendteknikker—de er praktiske måter å gjøre CSS til designbar kode på.

• BEM gir navn til betydning og rolle.
• SASS muliggjør enkel skriving samtidig som strukturen beholdes.
• Å kombinere begge gjør CSS mindre sårbar for feil.

La oss skrive CSS i dag på en måte ditt fremtidige jeg kan forstå.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video