SASS i BEM

Ten artykuł wyjaśnia SASS i BEM.

Wyjaśnimy koncepcje i metody wdrożenia, które zapobiegają zamieszaniu i kruchości, jakie często pojawiają się przy rozbudowanych plikach CSS, używając SASS i BEM wraz z konkretnymi przykładami.

YouTube Video

SASS i BEM

Wraz ze wzrostem liczby plików i ekranów CSS napotyka problemy typu „Nie wiem, gdzie ten styl jest zdefiniowany” lub „Niewielka zmiana zepsuła wygląd na innym ekranie”.

Dzieje się tak, ponieważ CSS jest z natury językiem, który nie wymusza reguł projektowych. Jeśli będziesz pisać w ten sposób, niezamierzone zależności będą się mnożyć.

SASS i BEM to praktyczne techniki, które przekształcają CSS z czegoś, co piszesz na bieżąco, w kod projektowany i zarządzany, zapobiegając tym problemom. Łącząc oba podejścia, możesz wyraźnie określić znaczenie stylów oraz poprawić czytelność, możliwości ponownego użycia i utrzymania.

Powody, dla których CSS łatwo staje się nie do opanowania

Taki CSS może się okazać trudny do zrozumienia pod kątem działania, gdy zajrzysz do kodu później.

 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}

• W tym przykładzie ta sama klasa .title wygląda inaczej w zależności od miejsca użycia, więc nie da się od razu stwierdzić, jaki styl będzie użyty dla tej .title.
• W ten sposób, gdy selektory stają się coraz głębsze i bardziej zależne od elementów nadrzędnych, CSS staje się trudny w przewidywaniu skutków zmian i podatny na błędy przy modyfikacjach.

BEM to konwencja nazewnictwa, która 'wyraża role poprzez nazwy'

BEM oznacza Block / Element / Modifier (Blok / Element / Modyfikator) i w nazwie zawiera informację, jaki komponent klasa reprezentuje i w jakim stanie się znajduje.

• Block to niezależny komponent.
• Element to wewnętrzny element bloku.
• Modifier oznacza stan lub wariant.

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

Dzięki tej konwencji można wywnioskować strukturę i rolę patrząc jedynie na HTML.

Podstawowa forma HTML z użyciem BEM

Oto przykład interfejsu karty wyrażonej w HTML przy użyciu BEM.

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

Już same nazwy klas pozwalają zrozumieć, że to 'card', 'title wewnątrz`' oraz stan 'emphasized'. To największa zaleta BEM.

Jednak samo BEM może prowadzić do rozwlekłego CSS.

Jeśli zastosujesz BEM bezpośrednio w CSS, ilość kodu zwykle wzrasta.

 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}

Tutaj stosując SASS, możesz mieć uporządkowany kod zachowujący strukturę.

Naturalnie wyrażaj BEM poprzez zagnieżdżenia w SASS

Dzięki zagnieżdżeniom w SASS możesz bezpośrednio odzwierciedlić strukturę BEM w kodzie.

 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}

& odnosi się do selektora nadrzędnego i świetnie współpracuje z nazewnictwem BEM.

CSS wygenerowany z tego SASS

Powyższy kod SASS kompiluje się do następującego CSS.

 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}

Mimo że wygląd pozostaje taki sam, obciążenie poznawcze dla programisty jest znacząco mniejsze.

Projektowanie bezpiecznego używania modyfikatorów

Ponieważ modyfikatory w BEM oznaczają 'stany', kluczowe jest ograniczenie ich do nadpisywania stylów.

 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}

Projekt jest stabilniejszy, jeśli modyfikatory traktujemy nie jako 'dodanie', lecz jako 'zmianę'.

Ogranicz zagnieżdżanie elementów do jednego poziomu

W BEM ważne jest, aby nie zagnieżdżać elementów zbyt głęboko.

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

Wielopoziomowe elementy takie jak .card__header__title to sygnał, że warto rozważyć rozdzielenie bloku.

Przykład struktury plików SASS

Na koniec, oto przykład struktury SASS, która sprawdza się w rzeczywistych projektach.

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

Jeśli zarządzasz każdym komponentem w myśl zasady 1 blok = 1 plik, rzadziej dochodzi do błędów.

Przykład pliku 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}

Ponieważ wszystko jest samodzielne w tej jednostce, usuwanie, przenoszenie i ponowne użycie są łatwe.

Podsumowanie

SASS i BEM to nie tylko modne techniki— to praktyczne podejście, aby CSS stał się kodem możliwym do projektowania.

• BEM nadaje nazwy znaczeniu i roli.
• SASS pozwala łatwo pisać kod, zachowując strukturę.
• Połączenie obu sposobów sprawia, że CSS rzadziej się psuje.

Piszmy dzisiaj CSS tak, by Twój przyszły ja go rozumiał.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video