Co to jest BEM?

Data: 2021-10-24 | Autor: Admin | Kategoria: JavaScript

Czym jest ten BEM? BEM pochodzi od skrótu “Block Element Modifier” jest sposobem pisania klas w języku CSS, opisem architektury, a zarazem podejściem komponentowym do tworzonej strony lub aplikacji. Poprzez podział na bloki pisanie kodu staje o wiele prostsze, a kod jest bardziej czytelny, zrozumiały i łatwiejszy w zarządzaniu.

Główne składowe to bloki, elementy i modyfikatory, w języku CSS opisywane za pomocą klas.

Blok

Bloki są swego rodzaju modułami, są niezależne i mogą być używane ponownie w wielu miejscach, a nawet w wielu projektach. Część nazwy klasy odpowiadająca za blok powinna opisywać wykorzystanie, przeznaczenie modułu, a nie jego stan (czyli na przykład to jak wygląda). Nazwa bloku powinna być unikalna. Pomocna w nazywaniu bloku może być, odpowiedź na pytanie “Czym jest ten element?“. Na przykład odpowiadając sobie na postawione wcześniej pytanie: “To jest menu.”, “To jest button.”, “To jest formularz logowania …“. Możemy również umieszczać bloki w blokach, na przykład mieć w bloku “formularz” blok “button”. Najczęściej nie definiujemy jego marginesów oraz pozycji w innym bloku, to rodzic powinien o tym decydować, czyli inny blok lub element. W nazwie klasy do odsperowania wyrazów używa się najczęściej pojedynczego myślnika.

Przykład bloków:

<!--block o nazwie "loader"-->
<div class="loader">Loader...</div>

<!--blok o nazwie "button"-->
<button class="button">Dalej</button>

<!--zangieżdżony blok "company-logo" w bloku "menu"-->
<menu class="menu">
  <span class="company-logo" />
</menu>

Element

Elementy to integralne części bloku, które nie mogą istnieć bez niego, są natomiast opcjonalne. Tak jak ma to miejsce, w przypadku bloku określa przeznaczenie elementu, a nie jego stan. Elementy również mogą być zagnieżdżone w innych elementach, bez ograniczeń. W nazwie klasy element od bloku oddziela się najczęściej podwójnym podkreśleniem (__) i zapisuję się według schematu nazwa-bloku__nazwa-elementu

Przykład użycia elementów:

<article class="post">
  <h1 class="post__title">Post</h1>
  <p class="post__content">
    Treść posta
    <a href="/" class="post__link">Strona główna</a>
  </p>
</article>

W powyższym przykładzie mamy zagnieżdżone elementy w innych elementach, pomimo to struktura nazewnictwa jest płaska. I poprzez zmianę struktury w kodzie HTML nie musimy modyfikować zagnieżdżeń w CSS.

Przykład jak to wygląda w CSS:

.post {}
.post__title {}
.post__content {}
.post__link {}

Przykład jak to wygląda w SCSS:

.post {
    &__title {}
    &__content {}
    &__link {}
}

Modyfikator

Modyfikatory określają wygląd (rozmiar, kolor, szablon), stan (wczytuję, niedostępny) lub zachowanie (skierowane w dół). W nazwie klasy stosujemy podwójny myślnik (--) lub pojedyncze podkreślenie (_). Modyfikatory zawsze powinny występować w towarzystwie elementu lub bloku.

Podział modyfikatorów:

• wartość jest zależna od umieszczenia modyfikatora, można to rozumieć w taki sposób, że gdy ktoś umieści modyfikator to nadaje wartość true na przykład

<button class="button button--disabled">Start</button>

• wartość jest zależna od wartości w modyfikatorze, na przykład, gdy stosujemy różne szablony

<button class="button button--theme-dark">Start</button>

Czy powinien to być blok, czy element?

Jeżeli coś będzie używane w kilku miejscach, to powinniśmy użyć bloku. W innym przypadku śmiało możemy korzystać z elementów, nawet głęboko zagnieżdżonych.

Czy mogę łączyć blok i element innego bloku?

Można i czasami jest to wręcz wskazane, pomaga to uniknąć duplikacji oraz stworzyć zmodyfikowane wersje oparte na istniejących.

Poniżej przykład użycia bloku “button” oraz elementu login-form__button do potrzebnych modyfikacji. Blok “button” pozostaje uniwersalny i możemy go użyć gdzie indziej i na przykład jego położenie w bloku login-form możemy kontrolować za pomocą elementu login-form__button.

<form class="login-form">
  <input type="text" class="login-form__input">
  <button class="button login-form__button">Wyślij</button>
</form>

<!--inny przykład-->
<div class="products">
    <div class="products__product product">
        <h2 class="product__title"></h2>
        <h2 class="product__price"></h2>
    </div>
    <div class="products__product product">
        <h2 class="product__title"></h2>
        <h2 class="product__price"></h2>
    </div>
</div>

<!--Można do również oddzielić-->
<div class="products">
    <div class="products__product">
        <div class="product">
                <h2 class="product__title"></h2>
                <h2 class="product__price"></h2>
        </div>
    </div>
    <div class="products__product">
        <div class="product">
                <h2 class="product__title"></h2>
                <h2 class="product__price"></h2>
        </div>
    </div>
</div>

Jak nazywać elementy, gdy są głęboko zagnieżdżone i b są skomplikowane?

W przypadku gdy zawartość bloku nie jest zbyt skomplikowana, to każdy element możemy nazywać oddzielnie.

.header {}
.header__logo {}
.header__nav {}
.header__list {}
.header__item {}
.header__title {}

W innym przypadku możemy dodawać prefix do nazw elementów sugerujący, w których elementach się znajdują.

.header {}
.header__logo {}
.header__nav {}
.header__nav-list {}
.header__nav-item {}
.header__nav-item-title {}

• ← React hooks czyli haki w React.js