BEM – metodologia tworzenia kodu

Nauczyć się języka, a następnie napisać stronę czy aplikację jest stosunkowo prosto. Prosto tym bardziej, gdy tworzy się ją jednym ciągiem, bez żadnych przerw w projekcie. Wiemy wtedy, gdzie znajdują się pliki, znamy kod, wiemy która klasa za co odpowiada i gdzie znajdują się ewentualne niedoskonałości. Problem zwykle pojawia się wtedy, gdy wracamy do kodu po przerwie. Nagle okazuje się, że to, co napisaliśmy wcale nie jest tak logiczne i takie fajne, jak nam się wydawało w chwili pisania kodu. Jeszcze gorzej jest, gdy przejmujemy kod po kimś, kto postępował podobnie i wprowadził do niego sobie tylko znane i stosowane nawyki. Tworzy to idealny przepis na spaghetti code.

Aby uniknąć zamieszania i bałaganu sformułowane zostały zasady tworzenia nazewnictwa klas kodu. Do najpopularniejszych należą OOCSS, SMACC, Atomic, SUITCSS oraz BEM. Tym ostatnim zajmiemy się dzisiaj, a pozostałymi w kolejnych częściach.

BEM

BEM, z angielskiego Block, Element, Modifier (czyli blok, element, modyfikator) to konwencja nazewnictwa klas CSS.
Czym charakteryzują się te elementy? Spójrzmy:

.block – odniesienie klasy do bloku

__ element  (poprzedzony dwoma podkreślnikami) – wskazuje na element, którego klasa dotyczy

–modifier (poprzedzony dwoma myślnikami) – wskazuje klasę, która jest modyfikatorem

Należy pamięć również o kilku najważniejszych zasadach:

  • wykorzystujemy tylko małe litery i cyfry (czyli zapisać możemy nazwaklasy lub nazwa-klasy ale nie nazwaKlasy)
  • stosujemy wyłącznie klasy, bez użycia identyfikatorów
  • używamy unikalnych nazw dla każdego elementu

Przejdźmy teraz do szczegółowego omówienia elementów.

Blok

Odnosi się do większych elementów, takich jak: header, container, menu, checbox, input
Przycisk formularza kontaktowego zazwyczaj tworzy się wpisując:

 <form> </form>

<button>

Następnie, odpowiednio do danego projektu, przechodzi się do stylowania odpowiedniego elementu. Problem pojawia się wtedy, gdy np. jeden przycisk ma być zielony, a drugi czerwony. Nadając elementowi button tło zielone sprawimy, że wszystkie przyciski będą zielone, ale żeby kolejny był czerwony musimy posiłkować się na przykład takim zapisem:

.wczesniejsza-nazwa button {
    background-color: red;
}

Zapis ten nie jest jednak najczytelniejszy i wymaga pewnej analizy kodu HTML. Dlatego zamiast odnosić się do elementu button w metodologii BEM odnosimy się do stworzonej klasy button.

Wyglądałoby to np. tak:

<button class=”button”> Przykład </button>

a styl CSS tak:

.button {
    background-color: red;
}

Zauważ, że ostylowaliśmy klasę button (wskazuje na to kropka przed słowem button), a nie cały element. Jeżeli chcielibyśmy stworzyć drugi przycisk o innym kolorze, musielibyśmy zastosować modyfikator, o czym za chwilę.

Element
Są to elementy zawarte w blokach, czyli m.in. menu item, list item, checkbox caption, header title itp – krótko mówiąc – dzieci bloku. Dla przypomnienia – tworzy się go poprzez dodanie podwójnego podkreślenia i nazwy elementu, tak jak w tym przykładzie: .menu__trigger

Widząc taki zapis od razu wiadomo, że trigger znajduje się w obrębie .menu

<div class=”menu”>
    <div class=”trigger”>
        <!– –>        
    </div>
</div>

Zapis taki ma wielką zaletę: dzięki niemu struktura kodu jest stosunkowo płaska.

Modyfikator

Modyfikator elementów (czyli flaga na bloku lub elemencie) – używany do zmiany wyglądu lub zachowania, jak np. disabled, highlighted, checked, color yellow itp. Tworzy się go poprzez dodanie dwóch myślników do konkretnego bloku, jak w przykładzie:

.button- -success

Wróćmy do naszego przykładu z przyciskiem. Standardowo przycisk jest czerwony o paddingu: 10 px 30px. Chcemy stworzyć drugi przycisk o tych samych wymiarach, ale w kolorze zielonym. Kod HTML będzie zatem wyglądał następująco:

<button class=”button”> Przykład </button>
<button class=”button button–success”> Przykład </button>

A kod CSS w taki sposób:

.button {
    padding: 10px 30px;
    background-color: red;
}

Zauważ, że w drugim przykładzie nie istnieje konieczność ponownego deklarowania własności padding, gdyż została ona już zaimplementowana w wykorzystanej klasie .button

Postępujemy dokładnie tak samo dla każdego przypadku, jeżeli chcemy zmienić wygląd lub zachowanie któregoś z naszych elementów.

Przykłady:

Przykład 1
Chcemy stworzyć 3 przyciski – neutralny, sukces i ostrzeżenie. W kodzie HTML wyglądać będzie to następująco:

<button class=”button”>
    Pierwszy przycisk
</button>

 <button class=”button-success”>
    Drugi przycisk
</button>

<button class=”button–danger”>
    Trzeci przycisk
</button>

Z kolei kod CSS będzie wyglądał tak:

.button {
    padding: 10px 30px;
    border: 1px solid black;
}

.button–success {
    background-color: green;
    color: white;
}

.button–danger {
    background-color: red;
    color: white;
}

Jak widzisz, przycisk drugi i trzeci będzie miał dokładnie takie same własności i wartości padding i border, jak w przycisku pierwszym. Różnica polega na kolorze tła i czcionki.

Przykład 2
Jak widzisz blok contact zawiera w sobie dwa inputy do wprowadzania zawartości oraz

<div class=”contact”>
    <form class=”contact__form contact__form-appearance”>
        <input class=”contact__input” type=”text” name=”name”>
        <input class=”contact__input–gray” type=”password” name=”password”>
        <button class=”contact__button contact__button_login”> Zaloguj się </button>
        <button class=”contact__button contact__button_register”> Zarejestruj się </button>
    </form>
</div>

dwa przyciski, które w zależności od swojego przeznaczenia mają inny wygląd.

Zalety

Z powyższego wynikają 3 główne zalety stosowania zasad BEM:

  • modułowość – style nie zależą od innych elementów na stronie, zatem nie będzie problemów z kaskadowością, co więcej – istnieje łatwa możliwość przenoszenia gotowych elementów z jednego projektu do drugiego.
  • prostsze utrzymanie kodu i ponowne użycie ich w innym projekcie (możesz nawet stworzyć własną bibliotekę bloków)
  • prostota – dzięki standaryzacji kod jest prostszy do zrozumienia

Wnioski

Metodologię warto stosować w każdym projekcie – niezależnie od jego wielkości czy opłacalności (bo i czasem nad projektem spędzi się za dużo czasu w stosunku do zarobku). Pomoże to jednak uprościć późniejsze utrzymanie, utrwala się dobre nawyki a nade wszystko – pozostawia się po sobie dobre wrażenie.

Marcin Dłubis

Czy każdy może zostać programistą?

W Internecie można znaleźć wiele dyskusji na temat tego, kto może zostać programistą i ile czasu powinno mu to zająć. Tak naprawdę trudno odpowiedzieć na te pytania, ponieważ każdy z nas ma inne predyspozycje, inną percepcję, mniej lub bardziej silną wolę i mniej lub więcej samozaparcia. Dziś jednak chcielibyśmy niektórym przytoczyć, a innym przypomnieć historię, która parę lat temu głośnym echem odbiła się w mediach społecznościowych.

Pewien młody amerykański programista, Patrick McConlogue codziennie rano mijał tego samego bezdomnego. Był nim Leo Grand – człowiek, który stracił pracę w Metlife, znanej firmie ubezpieczeniowej, a chwilę później musiał opuścił swoje mieszkanie, bo zabrakło mu pieniędzy na czynsz.

Patrick przyjrzał się Leo i stwierdził, że nie jest to raczej alkoholik czy narkoman, dlatego postanowił mu pomóc. Wybrał jednak nietypowy sposób, a mianowicie zaproponował Leo dwie opcje: albo następnego dnia przyniesie mu 100 dolarów, albo przyjdzie z komputerem, książkami i codziennie będzie go uczył programowania.

Bezdomny wybrał drugie rozwiązanie i od tej pory codziennie rano uczył się z Patrickiem, który przyniósł mu używanego, taniego Chromebooka Samsunga oraz podręcznik do nauki języka JavaScript. W ciągu dnia Leo kontynuował naukę dzięki uprzejmości jednej z nowojorskich restauracji, która udostępniła mu stolik i dostęp do prądu.

Leo przyznał, że 100 dolarów szybko by wydał, a dzięki bezinteresownej pomocy Patricka codziennie mógł nauczyć się czegoś nowego. Po 4 tygodniach wytężonej pracy bezdomny był w stanie samodzielnie napisać prostą aplikację. Nie była wolna od błędów, ale to nie zniechęcało Leo – wręcz przeciwnie – jeszcze intensywniej zgłębiał tajniki programowania.

Nieograniczone możliwości …

Po 16 tygodniach takiej wytężonej pracy nadeszły pierwsze i to dość spektakularne efekty: Leo stworzył aplikację ‚Trees for Cars’, dostępną zarówno w Google Play jak i App Store. Bazująca na carpoolingu aplikacja została stworzona z myślą o globalnym ociepleniu. Program ułatwia kontakt między pasażerami a kierowcami, którzy użyczają miejsca w swoich samochodach, w ten sposób przyczyniając się do ochrony środowiska.

Dodatkowo aplikacja wprowadziła element rywalizacji – każda zarejestrowana osoba dostała osobisty licznik ograniczonego śladu węglowego.

i niewykorzystane szanse

Bezdomny na aplikacji zarobił prawie 10 tysięcy dolarów. Gdyby przeznaczył je na dalszą naukę i do perfekcji opanował języki programowania, a medialną sławę wykorzystał do zainteresowania sobą którejś z firm w Dolinie Krzemowej, mógłby liczyć na zarobki rzędu nawet 100 tysięcy dolarów rocznie (według danych z 2012 roku). Zwłaszcza, że dostał nawet zaproszenie do siedziby samego Google.

Jednak Leo szybko stracił entuzjazm i zainteresowania dalszą nauką. Co prawda na początku twierdził co innego i miał nawet w planach napisanie kolejnej wersji aplikacji, jednak po roku od wydania pierwszej – nadal mieszkał na ulicy. Później słuch o nim zaginął i dziś nie bardzo wiadomo, co się z nim dzieje.(Jeśli macie na ten temat jakieś informacje – dajcie znać 🙂 )

W każdym razie wniosek z tej historii płynie następujący: każdy może nauczyć się programować, jednak nie każdy zostanie później programistą. Kluczowym elementem jest motywacja. Jeśli macie jej wystarczająco dużo, a dodatkowo dysponujecie też silną wolą i chęciami, to macie naprawdę duże szanse na to, żeby się przebranżowić. Kursy bootcampowe oferują możliwość zmiany w kilka tygodni, ale należy pamiętać, że to dopiero początek drogi i dopiero w pierwszej pracy zaczyna się prawdziwa „szkoła życia i programowania”. Jednak po przebrnięciu przez początki, które jak wiadomo – zwykle są najtrudniejsze – później będzie Wam już coraz łatwiej i z pewnością będziecie się cieszyć z podjęcia decyzji o rozpoczęciu przygody z kodowaniem.