CSS3 w innym stylu - Zacznij od zmiany sposobu myślenia

Nowa mini-seria dla programistów front-end. Tym razem CSS i metodologia BEM przedstawione w nieszablonowy sposób - czyli coś dla Was, ode mnie! :)

[hakeryk2]

Szczerze pomimo tego, że ogarniam CSS to nie do końca rozumiem co przedstawia ten filmik. Żeby go zrozumieć musiałbym używać Material Design bo wg filmiku on też się trzyma podobnych założeń.

[abrucjusz]

@hakeryk2: Ja to rozumiem, że chodzi o bardziej opisowe nazewnictwo klas css, tak aby nazwa odwzorowywala zagnieżdżenie elementów w DOM. To prowadzi do uniknięcia bałaganu, gdy chcemy precyzyjnie ostylowac mocno zagniezdzone elementy.

Np jesli masz div dla avatara, a wewnatrz niego div ze zdjęciem tegoz avatara, to klasy wg BEM będą takie:
.avatar

[hakeryk2]

@abrucjusz: Nie rozumiem co w tym rewolucyjnego. Ok, wiadomo, że wyższa wydajność selektorów (selector bezpośredni zawsze będzie szybszy od zagnieżdżonego), jednak powoduje to rozrośnięcia się HTML.

[maur]

Za małe rozwinięcie tematu.:) "Teraz już wiesz o co chodzi", a jaka to inna opcja niż BEM? ### tytuł

... I w stylowanie per h3 { } ?

[fronter]

@maur: są tez kolejne odcinki :)

[h.....j]

@fronter Szanuję za rzeczowe materiały ( ͡° ͜ʖ ͡°)

[fronter]

@hasztag_andrzej: trudno się nie zgodzić. Nawet samo nagrywanie byloby o niebo prostsze.

[Seraf]

Jak mi jako laika w temacie (czysty backendowiec) brakuje porównania z alternatywami.
Czy trudno by było pokazać zalety stosowania BEM porównując to z innymi metodologią (lub ich brakiem)?

[stawek]

@Seraf: podejściem można by powiedzieć że kontrastowym ale równie często spotykanym jest Atomic CSS.
Często spotykanym bo sama natura CSS zachęca i kusi do tego aby takie podejście stosować i przychodzi to dość naturalnie oraz wręcz od niechcenia - problem w tym że bez odpowiedniego przemyślenia (a nawet i z przemyśleniem) prowadzi to później do problemów - więcej i fajna dyskusja w komentarzach tutaj:
https://css-tricks.com/lets-define-exactly-atomic-css/

Wg mnie notacja BEM jest

[l.....v]

@abrucjusz:

No co ty nie powiesz. Jakbyś nie zauważył to w zacytowanym fragmencie jest wspomniany problem z długimi selektorami - preprocesor rozwiązuje m.in ten problem, jak również problem duplikacji, bo można w ramach preprocesora importować reguły z innego selektora.

I owszem nie jest on istotny jak piszesz kilka, kilkadziesiąt reguł (i nie martwisz się też np. o vendor-prefix)

Jak piszesz ich kilkaset to nagle okazuje się bardzo potrzebny ( ͡

[i.....n]

Wi dżej es? Cóż to za ustrojstwo? Na filmiku widzę jedynie VueJS, a to czyta się /vjuː/, jak słowo view.