Metodologia BEM

Aby pisać szybkie oraz niezawodne strony internetowe powinniśmy tworzyć przejrzysty i zrozumiały kod. Zachowanie tej zasady ma tym większe znaczenie im częściej wprowadzamy zmiany w obrębie strony internetowej. Dla języków programowania najlepszym źródłem takiej wiedzy jest książka Czysty Kod napisana przez Wujka Boba. Natomiast dla kaskadowych arkuszy styli najlepszym odpowiednikiem są konwencje nazewnicze. Obecnie używam tylko jednej z nich która powstała dzięki wyszukiwarce Yandex. Metodologia BEM bo o niej mowa mówi w jaki sposób powinniśmy nazywać klasy oraz dzielić elementy na stronie. Dzięki zastosowaniu tych rad będziemy w stanie w łatwy i przyjemny sposób nią zarządzać.

Problemy CSSa

<div>
    <button id="send" class="button">Wyślij wiadomość</button>
</div>

Pierwszym problemem z jakim się zmierzymy w CSS są selektory. Do powyższego elementu możemy odwołać się na wiele sposobów! Przez co trudniej nam zapamiętać czy i w jaki sposób już dodawaliśmy wygląd dla określonego przycisku. Do tego znajdujemy coraz to nowe sposoby odwoływania się do elementów które wprowadzają zamieszanie. Poniżej przedstawiam tylko kilka propozycji odwołania się do powyższego przycisku.

button
.button
#send
div > button
div > button.button
[class="button"]

_{psst. Czy wy też czuliście się zagubieni podczas korzystania z webpacka i loaderów? Ile oni wymyślili sposobów zapisu tej konfiguracji ...}

Kolejny problem to wartość selektorów. Gdy użyjemy selektora odwołując się po identyfikatorze. Reguły w nim zawarte bez problemu nadpisują wszystkie które ustawiliśmy w selektorach o mniejszym znaczeniu. Gdy zapiszemy coś w selektorze odwołująć się po klasie pierwszeństwo mają i tak style w selektorze który posiada identyfikator. Nasz kod zaczyna się komplikować gdy nie możemy znaleźć przyczyny nadpisania naszych stylów. Zazwyczaj są nadpisywane przez inne posiadające ważniejszy selektor. Gdy nie potrafimy znaleźć ważniejszego selektora ostatecznym rozwiązaniem naszego problemu okazuje się !important który jeszcze bardziej komplikuje całą sprawę.

#send {
	/* Nadpisałem wartość ustawioną w .button */
	padding: 20px; 
}

.button {
	/* Mój padding nie działa przycisk ma dalej 20px paddingu */
	padding: 10px;
}

.button {
	/* O zadziałało */
	padding: 12px !important; 
}

Rezygnujemy z kaskadowości !

Metodologia BEM całkowicie rezygnuje z kaskadowości. Wszystkie style powinny odwoływać się do klas. Zapominamy o nazwach znaczników, klasach rodziców, identyfikatorach. Od dziś jedynym sposobem tworzenia selektorów jest nazwa klasy. Koniec z tym całym zamieszaniem! Dodatkowo tworzenie klas pozwoli wykorzystać style w innych miejscach na stronie. Dzięki temu będziemy trzymać się zasady DRY. Jednak cała magia metodologii BEM jest zawarta w jej sposobie nazywania klas.

Nazwy klas w BEM

BEM to 3 literowy skrót podpowiadający nam w jaki sposób powinniśmy nazywać klasy na naszych stronach. Litery odpowiadają kolejno słowom:

• Blok - element którego nie możemy podzielić na mniejsze części a elementy w nim zawarte są z nim ściśle powiązane. Może to być na przykład stopka naszej strony, menu, kolumna boczna, ale też przycisk
• Element - elementem są znaczniki które są ściśle powiązane z swoim blokiem. np copyright w stopce, pozycja w menu, ikona w przycisku lub tekst w przycisku.
• Modyfikator - są to style które zmieniające wygląd elementu na podstawie wyglądu bez modyfikatora. Na przykład stopka może mieć modyfikator który będzie odpowiadał za ciemny motyw. Przycisk może posiadać modyfikator primary który nada naszemu guzikowi żywsze kolory aby zwracały uwagę użytkownika i wyróżniły przycisk na tle innych.

Przyjęło się że nazwy klas w BEM zapisujemy w poniższy sposób:

nazwa-bloku__nazwa-elemenu--nazwa-modyfikator

Jednak metodologia BEM nie podchodzi restrykcyjnie do sposobu nazewnictwa. Najważniejszą charakterystyką której musimy się trzymać jest podział na Blok, Element i Modyfikator. A sposób zapisu możemy stosować w zależności od naszych upodobań. Kilka przykładowych zmian które możemy zrobić to używać camelCase zamiast dash-case. Możemy stosować myślniki zamiast podkreślników lub ograniczyć się tylko do jednego znaku podkreślenia. Zapisujmy nazwy tak aby było nam najwygodniej. Poniżej przedstawiam kilka wariantów zapisu. Pierwszego wariantu używam na mojej stronie.

nazwaBloku__nazwaElementu--nazwaModyfikatora
nazwaBloku_nazwaElementu-nazwaModyfikatora
nazwaBloku--nazwaElementu__nazwaModyfikatora
nazwa-bloku_nazwa-elemenu--nazwa-modyfikator

Do kodu !

<div>
    <button class="button button--primary">
        <i class="icon icon--person button__icon"></i> Zaloguj się
    </button>
    <button class="button">Przypomnij hasło</button>
</div>

W naszym przykładzie stworzyliśmy dwa bloki (dla ikony oraz przycisku). Jak widzimy najwięcej dzieje się w znaczniku ikony. Mamy tam aż 3 klasy CSSowe. Element HTMLa zawierający ikonę jest równocześnie blokiem i elementem. Jak w CSS mógłby wyglądać blok icon? Klasa icon mogła by dodawać czcionke z ikonami oraz wielkość ikony, a modyfikator person używałby odpowiedniego znaku w ustawionej wcześniej czcionce. Skupmy się jednak na wystylizowaniu bloku o nazwie button. Jak powinien wyglądać kod CSS dla przycisku ?

.button {
	color: black;
	background: grey;
	font-size: 16px;
	padding: 0.5em;
	margin: 0 0.5em;
}

.button__icon {
	padding-right: 0.5em;
}

.button--primary {
	color: white;
	background: blue;
}

W selektorze modyfikatora zapisujemy tylko te wartości które on modyfikuje. Nie powinniśmy stosować selektora w formie .button.button--primary. Ważna jest też kolejność najpierw zapisujemy selektor dla bloku. Dopiero pod nim tworzymy selektor dla modyfikatora.

React i SCSS

Metodologia BEM pomaga nam utrzymać czystość w plikach SCSS. Dzięki BEM unikniemy zbyt dużego zagnieżdżania elementów oraz wykorzystamy zagnieżdżanie do pisania BEMa w lepszy sposób.

.button {
	color: black;
	background: grey;
	font-size: 16px;
	padding: 0.5em;
	margin: 0 0.5em;
    
	&__icon {
		padding-right: 0.5em;
	}

	&--primary {
		color: white;
		background: blue;
	}
}

Jeśli metodologia BEM przypadła ci do gustu i chciałbyś zacząć jej używać w swoim Reactowym projekcie chciałbym polecić Ci moją bibliotekę react-simple-bem.