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ą.
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.
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:
FSGeek$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.
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.
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.