Czy warto korzystać z BEM w 2020?

0

Dzień dobry, nie mogę znaleźć sensownych informacji a widzę, że nowe w miarę świeże informacje o BEM są z roku 2018.
Czy ma sens stosowanie tej metodologii przy obecnym dość szerokim wykorzystaniu SCSS, LESS, SASS?

Czy to nie jest przypadkiem tak, że BEM staje się bezużyteczne skoro zagnieżdżamy elementy w samych preprocesorach CSS i one to już ogarniają samodzielnie?

1

Chyba nie rozumiesz czym jest BEM... LESS, SASS nic nie ma do BEM, obie techiki się wzajemnie uzupełniają. Stosowanie BEM póki co było jest i będzie wartością dodaną w projekcie moim zdaniem bo przede wszystkim bardzo ułatwia modyfikowanie kodu.

1

BEM should not exist
Zdaje się że Bootstrap nie używa BEM. Jakiś inny framework do CSSów używa BEMa?

1

To zależy, wiele bibliotek/frameworków js rozwiązuje problem globalnego namespacingu w css, także używanie BEM razem z angularem, reactem, czy css in js nie ma sensu.
Natomiast jeśli to z czego korzystamy nie oferuje rozwiązania tego problemu to lepiej BEMować niż nie.

2

Niedawno @Adam Boduch też się nad tym zastanawiał - Czy używacie BEM?

0
sieedukuje napisał(a):

Chyba nie rozumiesz czym jest BEM... LESS, SASS nic nie ma do BEM, obie techiki się wzajemnie uzupełniają. Stosowanie BEM póki co było jest i będzie wartością dodaną w projekcie moim zdaniem bo przede wszystkim bardzo ułatwia modyfikowanie kodu.

Możliwe, że nie rozumiem czym jest BEM i mógłbyś nakierować mnie w jaki sposób te informacje są potrzebne? Osobiście zauważyłem, że w chwili kiedy wykonuje "npm build" w moim projekcie React w którym wykorzystuję SCSS to dzieje się przykładowo tak:
.> slider {

// CSS
h1 {
// CSS
}
}

zamienia się na to:

.slider h1 {//CSS}

Jakie zatem korzyści płyną z używania BEM skoro i tak moje IDE podczas kompilacji przerabia moje CSS ? W przypadku konfliktu nazw selektorów też to zmienia, wyjaśnisz mi w jaki sposób obie te techniki się uzupełniają?

0
neves napisał(a):

To zależy, wiele bibliotek/frameworków js rozwiązuje problem globalnego namespacingu w css, także używanie BEM razem z angularem, reactem, czy css in js nie ma sensu.
Natomiast jeśli to z czego korzystamy nie oferuje rozwiązania tego problemu to lepiej BEMować niż nie.

No i super, na takiej jasnej, merytorycznej odpowiedzi mi zależało, uczę się teraz ReactJS więc patrząc na wynikowy CSS po wykonaniu npm build tak czułem, że stosowanie BEM nie ma sensu.

Wielkie dzięki!

1
ggie napisał(a):
sieedukuje napisał(a):

Chyba nie rozumiesz czym jest BEM... LESS, SASS nic nie ma do BEM, obie techiki się wzajemnie uzupełniają. Stosowanie BEM póki co było jest i będzie wartością dodaną w projekcie moim zdaniem bo przede wszystkim bardzo ułatwia modyfikowanie kodu.

Możliwe, że nie rozumiem czym jest BEM i mógłbyś nakierować mnie w jaki sposób te informacje są potrzebne? Osobiście zauważyłem, że w chwili kiedy wykonuje "npm build" w moim projekcie React w którym wykorzystuję SCSS to dzieje się przykładowo tak:
.> slider {

// CSS
h1 {
// CSS
}
}

zamienia się na to:

.slider h1 {//CSS}

Jakie zatem korzyści płyną z używania BEM skoro i tak moje IDE podczas kompilacji przerabia moje CSS ? W przypadku konfliktu nazw selektorów też to zmienia, wyjaśnisz mi w jaki sposób obie te techniki się uzupełniają?

Tak, nie rozumiesz :P
BEM jest tylko konwencją nazywania. Jeśli masz pliki SCSS to używasz SASS i nawet o tym nie wiesz :D
Brawo. Właśnie poznałeś nową technologię :)

1

Co mają namespacy do BEM... BEM zakłada że nie mamy zagnieżdżonych selektorów, np potworków w stylu: klasa1 klasa2 klasa3 klasa3 {jakieś style}

Dzięki temu style nie są zależne od struktury HTML i potem jak musisz przestawić jednego diva w inne miejsce albo jak zmienisz style dla elementu to nie rozwala ci się nagle pół layoutu... BEM się nie wyklucza z angularem, reactem czy czymkolwiek innym... To jest konwencja która jak wszystkie inne techniki trzeba używać z głową.

@ggie a ty nadal nie rozumiesz co to jest a przyjęła zdanie kolegi jak prawdę objawioną... Poczytaj dokumentację, obejrzyj filmik na YouTube i zrozumiesz czym jest BEM

1
sieedukuje napisał(a):

Co mają namespacy do BEM... BEM zakłada że nie mamy zagnieżdżonych selektorów, np potworków w stylu: klasa1 klasa2 klasa3 klasa3 {jakieś style}
Dzięki temu style nie są zależne od struktury HTML i potem jak musisz przestawić jednego diva w inne miejsce albo jak zmienisz style dla elementu to nie rozwala ci się nagle pół layoutu... BEM się nie wyklucza z angularem, reactem czy czymkolwiek innym... To jest konwencja która jak wszystkie inne techniki trzeba używać z głową.

Problem który opisujesz był właśnie jednym z powodów dla których powstał React. W nowoczesnych frameworkach js style mają zakres per komponent, osiągają to w ten sam sposób w jaki BEM to osiągał. Tyle że React i Angular robią to automatycznie na etapie kompilacji i kompletnie zdejmują ten ciężar z programisty. Także jak najbardziej Angular czy React wykluczają użycie BEM, po co tracisz czas na coś co zostało zautomatyzowane?.
React : Adding a CSS Modules Stylesheet
Angular: Component Styles

0
neves napisał(a):
sieedukuje napisał(a):

Co mają namespacy do BEM... BEM zakłada że nie mamy zagnieżdżonych selektorów, np potworków w stylu: klasa1 klasa2 klasa3 klasa3 {jakieś style}
Dzięki temu style nie są zależne od struktury HTML i potem jak musisz przestawić jednego diva w inne miejsce albo jak zmienisz style dla elementu to nie rozwala ci się nagle pół layoutu... BEM się nie wyklucza z angularem, reactem czy czymkolwiek innym... To jest konwencja która jak wszystkie inne techniki trzeba używać z głową.

Problem który opisujesz był właśnie jednym z powodów dla których powstał React. W nowoczesnych frameworkach js style mają zakres per komponent, osiągają to w ten sam sposób w jaki BEM to osiągał. Tyle że React i Angular robią to automatycznie na etapie kompilacji i kompletnie zdejmują ten ciężar z programisty. Także jak najbardziej Angular czy React wykluczają użycie BEM, po co tracisz czas na coś co zostało zautomatyzowane?.
React : Adding a CSS Modules Stylesheet
Angular: Component Styles

Tak i nie... ja piszę w szerszym kontekście, nie biorę pod uwagę tylko Reacta i Angulara. To co piszesz jest oczywiście prawdą, ale nie w 100%. BEM to nie tylko namespace, chodzi także o oddzielenie struktury HTML od struktury klas w CSS bo wciąż zagnieżdża się je tworząc złożone selektory... także nawet w React czy Angular jest miejsce dla BEM. Ja osobiście korzystam i sobie chwalę.

0
sieedukuje napisał(a):

Co mają namespacy do BEM... BEM zakłada że nie mamy zagnieżdżonych selektorów, np potworków w stylu: klasa1 klasa2 klasa3 klasa3 {jakieś style}

Dzięki temu style nie są zależne od struktury HTML i potem jak musisz przestawić jednego diva w inne miejsce albo jak zmienisz style dla elementu to nie rozwala ci się nagle pół layoutu... BEM się nie wyklucza z angularem, reactem czy czymkolwiek innym... To jest konwencja która jak wszystkie inne techniki trzeba używać z głową.

@ggie a ty nadal nie rozumiesz co to jest a przyjęła zdanie kolegi jak prawdę objawioną... Poczytaj dokumentację, obejrzyj filmik na YouTube i zrozumiesz czym jest BEM

No właśnie nie do końca rozumiem po co stosować BEM jak IDE kompilując SCSS zwraca uwagę na różne rzeczy. Znalazłem warsztat omawiający BEM w prawie godzinnym materiale wideo więc zobaczę dokładnie o co chodzi.

1 użytkowników online, w tym zalogowanych: 0, gości: 1