Ach te internety!
  • React
  • Angular
  • JS
  • CSS
  • html
  • WP
  • A11Y
  • dev.
  • tools
  • off-topic
  • O mnie
Home  /  CSS  /  BEM czyli sprytny sposób na CSS

BEM czyli sprytny sposób na CSS

Lipiec 29, 2016 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:

  • css-tricks
  • kopalnia informacji i narzędzi

DLA GŁODNYCH WIEDZY?

  • csswizardry.com o nazewnictwie CSS w szerszym zakresie
  • Philip Walton rzeczowo i dogłębnie o BEM

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: BEM, css, konwencje
Poprzedni artykuł
Następny artykuł

Może Cię zainteresować...

  • O tym, jak jeden placeholder wywrócił moje życie do góry nogami

    27 grudnia 2018
  • CSS @import vs. Sass @import

    22 sierpnia 2018
  • Gradient nie taki straszny, jak go malują

    2 lutego 2018

Najnowsze wpisy

  • Semantyczne wersjonowanie – ściąga do pobrania
  • Czy znasz te możliwości Chrome DevTools?
  • Webstorm – 3 funkcjonalności, które musi znać każdy front-end developer!
  • Narzędzia do szukania narzędzi
  • Projekt Matka Programistka: Reaktywacja #3

Tagi

5-minut-js a11y AngularJS asynchroniczność BDD BEM box-decoration-break compile css dyrektywy es6 freebies html5 js jsfiddle kompilacja konwencje link matka programistka mobile ngRoute niezmiennosc plunkr podstawy-js post-link pre-link Progressive Web Apps PWA react routing rss sass scss Service Worker setState slice splice tc39 proposal TDD testowanie title ui.router wlasnosci wordpress zmiana nazwy zakładki

Podoba Ci się tutaj?