SASS och BEM

Den här artikeln förklarar SASS och BEM.

Vi kommer att förklara koncepten och implementationsmetoderna för att förebygga förvirring och skörhet som ofta uppstår när CSS blir storskaligt, med hjälp av SASS och BEM samt konkreta exempel.

YouTube Video

SASS och BEM

När antalet filer och vyer ökar tenderar CSS att få problem som 'Jag vet inte var den här stilen är definierad' och 'En liten ändring förstörde utseendet på en annan vy.'.

Detta beror på att CSS i grunden är ett språk som inte upprätthåller designregler. Om du fortsätter skriva utan struktur kommer oavsiktliga beroenden att öka.

SASS och BEM är praktiska tekniker som förvandlar CSS från något du skriver ad hoc till något du designar och hanterar, vilket förebygger sådana problem. Genom att kombinera dessa två kan du tydliggöra betydelsen av stilar och samtidigt förbättra läsbarhet, återanvändbarhet och underhållbarhet.

Anledningar till att CSS lätt blir svårhanterligt

CSS som detta kan bli svårt att förstå hur det fungerar när du tittar tillbaka på koden senare.

 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 det här exemplet ser samma .title-klass olika ut beroende på var den placeras, så du kan inte direkt avgöra vilken stil som tillämpas på denna .title.
• På detta sätt blir CSS svårare att förutsäga vad gäller påverkan, och mer benäget att gå sönder vid ändringar, ju djupare och mer beroende av överordnade element selektorerna blir.

BEM är en namngivningskonvention som 'uttrycker roller genom namn'

BEM står för Block / Element / Modifier och inkluderar i namnet vilken komponent klassen representerar och vilket tillstånd den har.

• Block är en fristående komponent.
• Element är ett internt element inom Blocket.
• Modifier representerar ett tillstånd eller en variant.

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

Med denna namngivningskonvention kan du lista ut struktur och roll bara genom att titta på HTML-koden.

Grundläggande form av HTML med BEM

Här är ett exempel på ett kort-UI uttryckt 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>

Bara av klassnamnen förstår du att detta är en 'card-komponent', 'title inuti den', samt ett 'markerat tillstånd'. Detta är den största fördelen med BEM.

Dock kan BEM ensamt leda till ordrik och omfattande CSS.

Om du skriver BEM direkt i CSS tenderar mängden kod att öka.

 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}

Här kan du med hjälp av SASS få strukturerad kod som bibehåller strukturen.

Uttryck BEM naturligt med SASS-nästning

Genom att använda SASS-nästning kan du direkt återspegla BEM-strukturen i koden.

 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}

& refererar till föräldraselektorn och fungerar väldigt bra med BEM-namngivning.

CSS genererat från denna SASS

Ovanstående SASS kompileras till CSS enligt följande.

 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}

Även om utseendet är detsamma, minskas den kognitiva belastningen för utvecklaren avsevärt.

Att designa för säker användning av Modifierare

Eftersom Modifierare i BEM representerar 'tillstånd' är det viktigt att begränsa dem till att användas för överskridningar.

 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}

Designen blir mer stabil om Modifierare behandlas som 'förändringar' snarare än 'tillägg'.

Begränsa nästning av Element till en nivå

I BEM är det viktigt att inte nästla element för djupt.

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

Flernivåelement som .card__header__title är ett tecken på att du bör överväga att dela upp Blocket.

Ett exempel på SASS-filstruktur

Slutligen, här är ett exempel på en SASS-struktur som är praktisk för verkliga projekt.

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

Om du hanterar varje komponent som 1 block = 1 fil minskar risken för problem.

Exempel 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}

Eftersom allt är självinnehållande på denna nivå blir borttagning, flytt och återanvändning enklare.

Sammanfattning

SASS och BEM är inte bara trendiga tekniker – de är praktiska metoder för att göra CSS designbar.

• BEM namnger betydelse och roll.
• SASS gör det lätt att skriva och samtidigt bibehålla strukturen.
• Att kombinera båda gör CSS mindre benägen att gå sönder.

Låt oss skriva CSS idag på ett sätt som ditt framtida jag kan förstå.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video