Home  /  CSS  /  BEM czyli sprytny sposób na CSS

BEM czyli sprytny sposób na CSS

CSS
bem css

Dziś krótko o BEM.

CO TO?

Konwencja nazywania klas w HTML i CSS.

SKĄD NAZWA?

BEM => Block, Element, Modifier

Czasami spotkacie się z nazwą BEM101. Ta stojedynka oznacza nic innego jak “informacje podstawowe” (wiki).

PRZYKŁAD?


/* Block component */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}

CZEMU TAK, A NIE INACZEJ?

a) Block -> blok, to abstrakcyjny twór utożsamiający ogólny, reużywalny komponent, np.: .btn {} -> przycisk; blok powinien być rozpatrywany w roli rodzica dla elementów (patrz b) )

b) Element -> element, rozpatrywany w roli dziecka, gdzie rodzicem jest blok; zazwyczaj jego nazwa jest oznaczona dwoma podkreślnikami (podłogami, 0x5F – jak kto woli), które występują po nazwie rodzica-bloku, a przed nazwą identyfikującą dany element.

c) Modifier -> modyfikator, ma możliwość manipulowania blokami, stylowania konkretnego bloku bez ingerencji w styl innych bloków o tej samej nazwie, zazwyczaj odznacza się dwoma myślnikami pomiędzy nazwą edytowanego bloku, a nazwą identyfikującą konkretną zmianę na danym bloku.

P.S. Nieważne, czy używamy podwójnych podkreślników, czy podwójnych myślników. To może być cokolwiek. BEM to tylko konwencja. Ważne, żeby wybrać takie znaczki, które nie zrobią wielu kłopotów przy pisaniu, sprawią, że kod będzie czytelny, a programiści uśmiechnięci.

CZY KTOŚ Z TEGO W OGÓLE KORZYSTA?

Tak. Seriously.

JESZCZE JEDEN PRZYKŁAD?

Od css-tricks – przepraszam, że nie mam swojego przykładu, ale ten jest dobry


BEM example
1

ZALETY?

  1. Przyspiesza pracę, jesteśmy produktywni. Zarówno w dodawaniu nowych stylów, jak i diagnozowaniu bugów. Od ręki widzimy, jaki jest rodzic, jakie style są już nadane, jakie style w ogóle istnieją dla danego rodzica. Wobec tego…
  2. …nie powielamy niepotrzebnie tego samego kodu.
  3. Jednolite, proste zasady stylowania dla wszystkich programistów w zespole. Chyba nie trzeba mówić, jakie to ważne
  4. Utrzymywanie relatywnie niskiej specyficzności.
  5. BEM to konwencja, można ją stosować razem z jakimikolwiek innymi narzędziami, bibliotekami, frameworkami, językami programowania, itd.
  6. Tworzymy skalowalny, łatwy w utrzymaniu kod, oparty na reużywalnych klockach. Tacy jesteśmy fajni.
  7. BEM mimo wszystko wspiera zasadę “jak zrobić, żeby się nie narobić”.

BEM vs. SASS?

Widzimy, że BEM daje nam super płaską strukturę CSS. A ludzie piszący w SASS uwielbiają zagnieżdżać, co się da.

Zalecaną praktyką jest:


.block {
  &__element {}
  &--modifier {}
}

daje nam:


.block{}
.block__element{}
.block--modifier{}

Wiem, ja też krzywo patrzę na powyższy przykład. Całe szczęście internety są pełne mixinów oraz bibliotek do SASS pozwalające na bezbolesne wprowadzenie BEM do projektu Niestety nie polecę Wam żadnej konkretnej. Nie mam wystarczającego doświadczenia, aby doradzać Wam w tym temacie.

CO JA O TYM SĄDZĘ?

Hmmmm… ambitna konwencja. Wydaje się, że systematyzuje i porządkuje bałagan w stylach. Poniekąd – daje przyzwolenie programistom (tak, dla mnie ludzie piszący CSS to też programiści ;p) na wprowadzanie klas, których nazwa definiuje styl, np.: “.btn–green”. W teorii to niedozwolone. Ok – niewskazane, aby klasa w jakikolwiek sposób mówiła o wyglądzie. Więcej o semantycznym CSS tu: KLIK. Jednak – ręka w górę, kto nigdy nie napisał coś w stylu “class=margin-zero”, “class=large-box”, …? No właśnie. BEM jest po naszej stronie.

ŹRÓDŁA:

DLA GŁODNYCH WIEDZY?

P.S.

Wisienka na torcie – zapraszam na stronę poświęconą metodologii BEM – KLIK! – nawet jeśli nie interesuje Was BEM – ta stronka jest zgrabna, ładna i powabna, zatem warto rzucić okiem przez minutę na coś po prostu “z klasą”

Tylko brakuje mi na niej odrobiny parallaxa… Wam też??

W ogóle polecam wpaść na stronę KLIK! – znajdziecie tu też narzędzia przydatne w pracy z BEM. Jakie? Zapraszam na stronkę

Miało być krótko. Mam nadzieję nikt nie ziewa

Tagi: , ,

Może Cię zainteresować...