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?
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.
BEM should not exist
Zdaje się że Bootstrap nie używa BEM. Jakiś inny framework do CSSów używa BEMa?
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.
Niedawno @Adam Boduch też się nad tym zastanawiał - Czy używacie BEM?
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ą?
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!
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ę :)
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
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
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ę.
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.
CSS 
Sass 
sieedukujesieedukuje