CSS: Czym jest BEM

0:00W tej lekcji opowiem o

0:02architekturze BM czyli blok element mat i Fire blok element firmy blok element po

0:09polsku tak samo Fire to po polsku modyfikacja.

0:12Jest to bardzo popularna konwencja.

0:16Która jest często źle interpretowana przez

0:19różnych deweloperów i sprowadzona tylko i wyłącznie do

0:23konwencji nazewnictwa i co nie jest oczywiście prawdą w stosunku do Bema.

0:27Główne założenia są takie

0:29aby w Bremie rozdzielać fragmenty naszej strony na bloki czyli tak jak tutaj np.

0:36mamy wizytówkę no to jest przykładowy blok

0:39czy też możemy na to mówić teraz komponenty.

0:42Generalnie chodzi o to samo

0:45i każdy z tych komponentów czy bloków powinien mieć swoje elementy no i u nas w

0:50przypadku naszej wizytówki mamy dwa elementy.

0:54Jeden to business cards tekst No i drugie

0:56to biznes kart logo które jest tak naprawdę znaczkiem kod tylko że

1:01dosyć mocno.

1:03Więc nasz blok składa się z dwóch

1:06elementów i w tym momencie nie ma żadnych modyfikacji torów.

1:09Jeśli chcielibyśmy na przykład stworzyć wariant ciemne tej wizytówki ja

1:15już to tutaj też zrobiłem no to możemy dodać do tego klasę do bloku samego.

1:20Klasę Business Card Dark no i w ten sposób

1:24nasza karta zmieniła zupełnie wygląd na jakiś ciemny jego wariant.

1:29Przede wszystkim chodzi w Bremie o to aby

1:32potrafić dzielić to o czym mówimy czyli w naszych przypadkach strony internetowe na

1:38pojedyncze bloki czy komponenty które niezależnie od tego gdzie będą ułożone w

1:42markecie powinny zachowywać się w identyczny sposób.

1:45DM sam w sobie nie narzuca konwencji nazewnictwa.

1:49Tak naprawdę możemy nawet jeżeli byśmy chcieli.

1:52Oczywiście nie jest to

1:54przykład który powinniście robić na swoich stronach internetowych ale jeśli

1:58chcielibyśmy stworzyć konwencję że nasz blok to oczywiście to jest nazwa

2:03naszego bloku i chcemy zrobić aparatury nie takie jak są często popularne podwójne

2:08Anders Core element i tabel Dash Fire

2:14tylko powiedzmy blok dowolny znak albo 1.

2:19Anders Core 1 Dash to dalej jest poprawny.

2:22Jeżeli dzielimy fragmenty naszych stron na pojedyncze bloki

2:27czy nawet jeżeli byśmy stworzyli blok 1 element 2 i jedynka jest naszym ustalonym.

2:36Aparaturę do.

2:38Elementów a dwójka do modyfikacji torów nie ma z tym problemu.

2:42Ważna jest nie konwencja nazewnictwa bo konwencja nazewnictwa nie uchroni nas

2:47przed problemami przed którymi próbuje nas uchronić.

2:51Tylko ważne jest dobre podejście do tego

2:53co jest blokiem co jest elementem a co jest modyfikacją

2:57i jakby na to nie patrzeć to faktycznie

3:01jest to dosyć dla nas naturalne żeby dzielić elementy na tego rodzaju

3:05komponenty czy bloki bo widzimy że ta wizytówka jest sama w sobie pewnym bytem

3:12i ona ma swoje cechy czyli cechą tego bytu np.

3:15jest to że ma taki tutaj sekcję z tekstem czy ma swoje jakieś logo

3:21i tak naprawdę jeżeli będziemy wprowadzać Bema tylko i wyłącznie do konwencji

3:26nazewnictwa to nie ma z niego żadnego pożytku ponieważ.

3:30Dalej możemy popełniać różne błędy i np.

3:34stworzyć sobie tutaj.

3:36Osobny blok na ten element HTML który reprezentuje faktycznie

3:41tekst czasami jest oczywiście konieczność zagęszczenia bloków ale jeżeli ta lista

3:46będzie używana tylko i wyłącznie w tym komponent no to nie ma to sensu.

3:49W związku z czym warto pamiętać że BM to nie tylko konwencja nazewnictwa.

3:54Możemy się trzymać dowolnej z nich czy to Anders Kory czy to dalsze czy to dowolne

3:59inne znaki tak długo jak robimy dobrą separację naszego kodu to będzie OK.

4:05Tomasz Jakub też napisał o tym w swoim blogu.

4:08Schematyczne HTML.

4:10Link zostawię w źródłach.

4:13Do tego kursu jest to artykuł po polsku który też tłumaczy dlaczego

4:18Bema nie można sprowadzać tylko i wyłącznie do konwencji nazewnictwa.

4:22A na pewno nie wymuszać na ludziach tej konkretnej konwencji nazewnictwa i

4:27zarzucać że nie korzystają z dema poprawnie.

4:31Tak naprawdę wprowadza nam Domain specyfik lęgowych w kontekście tego jak mówimy o

4:37naszym projekcie i o tym też polecam sobie na własną rękę poczytać.

4:41Jeżeli zależy nam na tworzeniu skalą wolnego kodu czy to w lesie czy w innych

4:46językach programowania czy przy tworzeniu designu.