Komentarze do: Block, Element, Modifier w CSS

Autor: Comandeer

Comandeer — Sun, 13 Mar 2016 16:03:00 +0000

W odpowiedzi do Wilhelm. W BEM bloki mogą się ze sobą mieszać, np. blok wyszukiwarki może składać się z osobnych bloków poszczególnych inputów. Stąd taką globalną klasę inputów można po prostu uważać za osobny blok (choć tak, brzmi to nieco naciąganie ;)).

Autor: Wilhelm

Wilhelm — Sun, 13 Mar 2016 16:01:00 +0000

Hmm, ok. Jednak mam pytanie. Co zrobić w przypadku kiedy to selektor np. określający wygląd inputów ma być globalny? Bo z tego co ustaliłem czytając artykuł BEM styluje każdy blok osobno. Można zrobić deklaracje klas globalnych, ale czy to wtedy nie będzie złamana struktura BEM?

Autor: Comandeer

Comandeer — Wed, 17 Feb 2016 12:42:00 +0000

W odpowiedzi do Comandeer. Aleś Ty głupi, Comandeer… Oczywiście, że BEM przydaje się nawet w mniejszych projektach! Popatrz na swoją własną stronę WWW i na problemy ze specyficznością, na które się tam nadziewasz! Weź to przepisz na BEM i miej wreszcie spokój…

Autor: Mr.Mr

Mr.Mr — Sat, 19 Jul 2014 10:40:00 +0000

W odpowiedzi do Michał Załęcki. W kwestii BEM vs. małe projekty - http://www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/ Artykuł średni, mało konkretów i IMO właściwie brak odpowiedzi na podstawowe pytania... ale jest to jakiś głoś w dyskusji, więc postanowiłem wkleić.

Autor: Michał Kortas

Michał Kortas — Tue, 22 Apr 2014 06:58:00 +0000

W odpowiedzi do Mr.Mr. Hahaha :) Właśnie to napisałem - to już kwestia oceny każdego projektu z osobna.

Autor: Mr.Mr

Mr.Mr — Tue, 22 Apr 2014 06:43:00 +0000

W odpowiedzi do Michał Kortas. I Ty przeciwko Nam? :) IMO można sobie na BEM pozwolić zawsze. To już kwestia oceny webmastera.

Autor: Michał Załęcki

Michał Załęcki — Mon, 21 Apr 2014 17:00:00 +0000

W odpowiedzi do Michał Kortas. ...a lepsze jest wrogiem dobrego :)

Autor: Michał Kortas

Michał Kortas — Mon, 21 Apr 2014 15:00:00 +0000

W odpowiedzi do Sebastian Żebrowski. Będziemy pamiętać na przyszłość. Dzięki za wskazówkę! :)

Autor: Michał Kortas

Michał Kortas — Mon, 21 Apr 2014 14:59:00 +0000

W odpowiedzi do Comandeer. Uważam, że każdy zna swoje potrzeby i każdy może sobie samemu wyznaczyć prywatną granicę pomiędzy prostą stroną, która nie potrzebuje super-hiper-ekstra dodatków do jej tworzenia oraz taką, gdzie korzystanie ze wspomagaczy jest wręcz niezwykle przydatne. Osobiście nie użyłbym BEM przy budowie mikro stronki informacyjnej. Jak to się mówi? Nadgorliwość jest gorsza od faszyzmu? ;)

Autor: Comandeer

Comandeer — Mon, 21 Apr 2014 12:56:00 +0000

W odpowiedzi do Mr.Mr. Jeszcze raz powrócę do mojej strony domowej: czy odniosę jakąś korzyść z zastosowania BEM? Nie, bo kod strony jest po prostu za mały. Przez zastosowanie BEM do stylowania stworzyłbym dwukrotnie większy kod i nie podniósłbym czytelności tego kodu. .nav li raczej nagle się nie rozrośnie do .nav li cośtam i nie widzę po prostu sensu w dostawianiu .nav, .nav-item. Jeśli nie ma potrzeby tworzyć nadmiarowego kodu, to się go nie tworzy. Co innego jeśli np piszemy framework - wówczas winien być elastyczny i tutaj się BEM sprawdza (oczywiście zawsze w połączeniu z OOCSS)

Autor: Piotr Nalepa

Piotr Nalepa — Sun, 20 Apr 2014 16:29:00 +0000

W odpowiedzi do Michał Załęcki. Akurat ja sobie to wyobrażam, bo miałem okazję pracować przy dużym projekcie bez SASS i LESS. Zarządzanie zależnościami między kawałkami kodu może doprowadzić większą ekipę developerów do bałaganu. Co innego jak skład liczy 2-3 osoby, a co innego gdy ma 30 osób.

Autor: Sebastian Żebrowski

Sebastian Żebrowski — Sun, 20 Apr 2014 12:00:00 +0000

W odpowiedzi do Mr.Mr. Ok, ale teorie zawsze powinniście jakimś przykładem poprzeć. Ja przez całą edukację mam teorie, jedyna praktyka przez te lata to miesiąc w serwisie komputerowym.

Autor: Mr.Mr

Mr.Mr — Sun, 20 Apr 2014 11:54:00 +0000

W odpowiedzi do Sebastian Żebrowski. Hmm... ale sprawa z ID sprowadza się do tego, że nie powinno się go używać (co do zasady - w komentarzach do tego artykułu temat jest rozwinięty trochę o niuanse).

Autor: Sebastian Żebrowski

Sebastian Żebrowski — Sun, 20 Apr 2014 11:18:00 +0000

W odpowiedzi do Michał Załęcki. Czytałem ten artykuł, jest dobry, ale mógłby być lepszy np. ID jest be - suchy tekst, żadnego przykładu. Przekazujecie dużo wiedzy - teoria, a najlepiej uczyć się na praktyce ;) Ponadto używacie takich słów jak "refaktoryzacja kodu" - co to znaczy? Fajnie by było zrobić jakaś legendę, bądź dodać "title". EDIT: Może zapoczątkujecie jakąś serie artykułów o frameworkach (Jak ich używać w praktyce)?

Autor: Sebastian Żebrowski

Sebastian Żebrowski — Sun, 20 Apr 2014 11:11:00 +0000

W odpowiedzi do Mr.Mr. U mnie z angielskim trochę słabo, mam nadzieję, że coś ogarnę ;)

Autor: Mr.Mr

Mr.Mr — Sun, 20 Apr 2014 10:21:00 +0000

W odpowiedzi do Sebastian Żebrowski. BEM w zakresie CSS jest dość prosty... właściwie to chodzi o konwencję nazewniczą + ograniczanie kaskadowości co wpływa na brak pisania kontekstowych arkuszy stylów. Może to Ci pomoże: http://www.youtube.com/watch?v=AIwJhTJD-rk

Autor: Mr.Mr

Mr.Mr — Sun, 20 Apr 2014 10:18:00 +0000

W odpowiedzi do Comandeer. Ja nadal mam dziwne wrażenie, że masz rację i zarazem jej nie masz (tzn. nie do końca). Osobiście wolałbym wprowadzić klasy bo z doświadczenia wiem, że projekty lubią się rozszerzać ;) więc wolałbym sobie na przyszłość oszczędzić przepisywania kodu.

Autor: Comandeer

Comandeer — Sun, 20 Apr 2014 09:11:00 +0000

W odpowiedzi do Mr.Mr. To zależy jak definiujemy mały projekt. Dla mnie nie ma sensu brudzić kodu HTML klasami gdy mamy 2 rodzaje list na stronie i można je rozróżnić całkowicie po kontekście ich wystąpienia. Nie ma po prostu potrzeby wprowadzania dodatkowej warstwy abstrakcji. W utrzymaniu tego kodu nic to nie pomoże.

Autor: Michał Załęcki

Michał Załęcki — Sun, 20 Apr 2014 08:53:00 +0000

W odpowiedzi do Piotr Nalepa. Przy dużych projektach nie wyobrażam sobie niekorzystania z np. SASS, gdzie możemy rozszerzać/dziedziczyć selektory. Nic nie stoi na przeszkodzie połączenia BEM i OOCSS. Otrzymamy bardziej przejrzysty HTML kosztem trochę większego pliku CSS. Warto dodać, że w takim rozwiązaniu nie będziemy musieli powracać do kodu HTML, a jedynie usuniemy lub dodamy kilka dyrektyw @extend. Szczególnie przydatne okaże się to gdy frontendowiec nie ma dostępu, bądź jest on ograniczony, do kodu który "wypluwa" kod HTML.

Autor: Michał Załęcki

Michał Załęcki — Sun, 20 Apr 2014 08:46:00 +0000

W odpowiedzi do Sebastian Żebrowski. Dziękujemy za sugestię. Przykładem strony, która korzysta z BEM jest dobrze znany blog http://csswizardry.com/

Autor: Sebastian Żebrowski

Sebastian Żebrowski — Sun, 20 Apr 2014 07:51:00 +0000

Jedna mała uwaga, Wasz blog czytają również początkujący webmasterzy, nie do końca mam pojęcie o tym, co piszecie ;) Przydałaby się jakiś krótki video tutorial, jakieś przykłady stron oparte na BEM.

Autor: Piotr Nalepa

Piotr Nalepa — Sun, 20 Apr 2014 07:42:00 +0000

Z własnego doświadczenia wiem, że BEM się nie sprawdza przy naprawdę dużych, skomplikowanych stronach. Wprowadza to za dużo zamieszania. Lepiej stosować OOCSS. Jest prościej i przyjemniej. I dzięki stosowaniu inteligentnego nazewnictwa unikamy makaronizmów.

Autor: Mr.Mr

Mr.Mr — Sat, 19 Apr 2014 21:42:00 +0000

W odpowiedzi do Comandeer. Myślę, że w przypadku małych projektów sensowność jest dyskusyjna, ale mocne argumenty są zarówno za jak i przeciw. Osobiście skłonił bym się jednak ku sugestii Michała. Zawsze w przypadku rozbudowy witryny można łatwiej zacząć z BEM jeśli już taką konwencję nazewniczą stosujemy.

Autor: Comandeer

Comandeer — Sat, 19 Apr 2014 20:55:00 +0000

W odpowiedzi do Michał Załęcki. Ja po prostu nie widzę sensu w takim pisaniu małych stron. Przykładem może być moja domowa: szybciej mi tak naprawdę przyjdzie przepisanie stylów na nowo niźli ich modyfikacja. No i strona jest podzielona aż na 4 części: nagłówek, menu, treść i stopkę. Tak prosta struktura, że nawet nie ma po co wprowadzać .site-header, .site-header__logo itd.

Autor: Michał Załęcki

Michał Załęcki — Sat, 19 Apr 2014 20:53:00 +0000

W odpowiedzi do Comandeer. No cóż, medalu raczej za to nie dostanie :) Wracaj do BEM to jest to kwestia preferencji. Nie powiemy, że "ta strona jest za mała na BEM, powinieneś to zrobić inaczej", jasne, że coś takiego: .button--big-red-with-black-icon-and-bright-blue-text jest co najmniej nietrafionym pomysłem (abstrahując do wątpliwych walorów estetycznych).

Autor: Comandeer

Comandeer — Sat, 19 Apr 2014 20:47:00 +0000

W odpowiedzi do Michał Załęcki. Ekhm, to już po prostu webmaster wystawia świadectwo o sobie ;)

Autor: Michał Załęcki

Michał Załęcki — Sat, 19 Apr 2014 20:46:00 +0000

W odpowiedzi do Comandeer. Pisząc liniowo miałem na myśli w atrybutach :D http://www.w3.org/TR/html401/present/styles.html#h-14.2.2

Autor: Comandeer

Comandeer — Sat, 19 Apr 2014 20:42:00 +0000

W odpowiedzi do Michał Załęcki. Ale przecież to jest bez znaczenia czy używam BEM, czy nie. Jak se debilnie nazwę klasę to jest to moja wina. W BEM też można nadawać oderwane od rzeczywistości nazwy bloków. Co do liniowego CSS-a: na produkcji przecież winien taki być ;) Ale nikt nie edytuje takich potworków, bo trzyma na gicie/SVN-ie wersję developerską, gdzie wszystko jest podzielone tak, jak webmaster lubi.

Autor: Michał Załęcki

Michał Załęcki — Sat, 19 Apr 2014 20:38:00 +0000

W odpowiedzi do Comandeer. .menu, ok. Ale jak mam np. .twiter-timeline to nie wiem czy chodzi o jakiś większy wrapper czy już iframe. A .wrapper--twitter i .twitter już rozwiewają wątpliwości. Prawda jest taka, że w naprawdę małych projektach można by pakować CSS liniowo, bo czemu nie? Zadzała? Tak, a że kod wygląda jak wygląda... użytkownika i tak to nic nie obchodzi. Problematyczne robi się dopiero wprowadzanie zmian w takim "potworku".

Autor: Comandeer

Comandeer — Sat, 19 Apr 2014 20:30:00 +0000

W odpowiedzi do Michał Załęcki. .menu w małym projekcie raczej też jest jednoznaczne ;) W mniejszych projektach BEM wymaga _o wiele_ więcej pracy, bo tam często wystarczy zastosować prostą kaskadowość i hierarchię elementów. Nie wydaje mi się, żeby potrzebne było w nich całkowite oddzielenie wyglądu przez spłaszczenie hierarchii i przerzucenie wszystkiego na klasy.

Autor: Michał Załęcki

Michał Załęcki — Sat, 19 Apr 2014 20:26:00 +0000

W odpowiedzi do Comandeer. BEM nawet w mniejszych projektach rozwiązuje Ci przynajmniej jeden duży problem, mianowicie, wprowadzanie zmian w już istniejącym projekcie np. po pół, po roku. Patrzysz na selektor i wiesz dokładnie o jaki button czy tabelę chodzi bez zaglądania do źródła. Warto stosować tym bardziej, że nie wymaga to jakiejś dodatkowej pracy.

Autor: Comandeer

Comandeer — Sat, 19 Apr 2014 19:20:00 +0000

W przypadku BEM warto podać kilka przykładów wykorzystania in wild:
– SUIT: https://github.com/suitcss/suit
– Inuit.css: https://github.com/csswizardry/inuit.css

BEM to po prostu kolejna warstwa abstrakcji… niepotrzebna w przypadku mniejszych projektów.