Czym są? – SCSS i BEM

SCSS jest tym dla CSS czym Typescript dla JavaScript’u. Pozwala nam w prosty sposób rozszerzyć możliwości zwykłego CSS . Natomiast BEM jest zbiorem zaleceń dotyczących tworzenia i nazewnictwa klas. I obie te rzeczy idealnie ze sobą współpracują.

Czym jest SCSS?

SCSS jest inną nazwą dla Sass 3 która posiada trochę odmienną składnię od swoich poprzedników i dlatego otrzymała inną nazwę. Składnia została tak dopasowana by była w pełni kompatybilna ze zwykłymi plikami CSS. Oznacza to że każdy poprawny plik CSS będzie poprawnym plikem SCSS. Jednocześnie posiadamy wszystkie możliwości jakie dawał nam Sass.

Co nam daje SCSS?

SCSS daje nam wiele możliwości z których warto korzystać ponieważ usprawniają naszą pracę ze stylami. Pierwsza rzecz jaka jest warta użycia to zmienne. Dzięki konsekwetnemu korzystaniu z tej funkcji możemy sobie ułatwić pracę w przypadku potrzeby zmiany np.: kolorystyki całej strony. Zmieniamy ją w jednym miejscu a zmiany widzimy wszędzie. Korzystanie ze zmiennych jest proste i wygląda następująco:

$button--backgroundColor: red;


button{

background-color: $button--background-color

}

Oprócz tego możemy zagnieżdżać w sobie selektory CSS dzięki czemu widać hierarchię styli w naszym pliku i wszystko jest dużo bardziej uporządkowane. Tak to może wyglądać w kodzie:

footer{
width:100%;
   
    a{
        color: red;
     };
}

Oprócz tego możemy jeszcze importować do pliku SCSS inny plik .scss, rozszerzać napisane klasy, korzystać z mixinów i operatorów arytmetycznych. Jest to temat warty uwagi więc kiedyś pewnie wrócę do niego z bardziej konkretnymi rzeczami.

Jak się ma do tego BEM?

Jednak jak się do tego ma metodologia BEM? I co to takiego jest? BEM jest metodologią, sposobem pisania naszych aplikacji webowych. Główną ideą tego jest dzielenie naszej aplikacji na samodzielne jednostki zwane też blokami. Ma to pomóc w tworzeniu komponentów, które w prosty sposób będziemy mogli wykorzystać w innych projektach. BEM jest skrótem składającym się z trzech pierwszych liter opisującą tą metodologie – Block, Element, Modifier.

Block – jest to nasz niezależny komponent, który będziemy mogli użyć w innej aplikacji np.: widget kalendarza, formularz logowania, widget zegara itp.

Element- jest to pojedynczy element który znajduje się w naszym komponencie np.: przycisk submit w formularzu, tytuł widget’a itd.

Modifier – opisuje stan, wygląd lub zachowanie elementu lub całego bloku np.: kolor, zachowanie po kliknięciu, czy jest zablokowany itd.

Nie wiem jak dla was ale jak dla mnie taka definicja BEM’a idealnie pasuje do React’a. Tworzymy sobie komponenty które potem możemy wykorzystać w innych miejscach.

BEM & SCSS

Jednak BEM nie odnosi się tylko to projektowania samej struktury aplikacji ale ma swoje przełożenie w odpowiednim tworzeniu styli. Jest kilka oficjalnie dopuszczalnych konwencji ich nazewnictwa jednak dla mnie na najbardziej przejrzystą wygląda następująca

blockName__elemName--modifierName

Dzięki temu, że w SCSS możemy tworzyć zagnieżdżone struktury w których elementem nadrzędnym będzie block, który będzie zawierał w sobie kolejne elementy i modifiery stworzymy czystą i uporządkowaną hierarchię pliku. Zapowiada się, że dzięki połączeniu BEM’a i SCSS można naprawdę wiele zrobić. Jak to wygląda w praktyce to dopiero zobaczę i wtedy podzielę się moimi przemyśleniami. Póki co jeśli chcecie poczytać więcej na temat BEM’a to możecie zajrzeć tutaj.

Uff. Wpis wyszedł troszkę dłuższy niż myślałem a i tak nie napisałem o wszystkim co chciałem. Mam nadzieję, że uda mi się wytrwać w metodologii BEM ponieważ wymaga sporo samodyscypliny. Pewnie wrócę do tego tematu jak napiszę trochę kodu w tym oraz w SCSS więc oczekujcie w przyszłości jeszcze wpisów na ten temat. A póki co trzymajcie się ciepło i do usłyszenia.