Mój kolega mocno naciska na metodę BEM (Block Element Modifier) dla CSS w projekcie, którym kieruje, i po prostu nie potrafię zrozumieć, co czyni go lepszym niż LESS CSS, który piszemy od lat.
BEM to metodologia CSS. Inne obejmują OOCSS i SMACSS. Metodologie te są używane do pisania modułowego, rozszerzalnego kodu wielokrotnego użytku, który działa dobrze na dużą skalę.
MNIEJ jest preprocesorem CSS. Inne obejmują Sass i Stylus. Te preprocesory są używane do konwersji odpowiednich źródeł na rozszerzony CSS.
BEM i LESS nie są porównywalne jako „lepsze” od siebie, są to narzędzia, które służą różnym celom. Nie powiedziałbyś, że śrubokręt jest lepszy niż młotek, chyba że rozważasz użyteczność rozwiązania konkretnego problemu.
Twierdzi, że „wyższa wydajność” ...
Wydajność musiałaby być mierzona pomiędzy klasycznym stylem CSS:
.widget .header
i styl BEM:
.widget__header
ale ogólnie rzecz biorąc, wydajność selektora CSS nie stanowi wąskiego gardła i nie trzeba go optymalizować.
„Wydajność” BEM dotyczy zazwyczaj kodu pisania wydajności programisty. Jeśli metodologia BEM jest stosowana konsekwentnie i poprawnie, grupom programistów łatwo jest jednocześnie tworzyć odrębne moduły bez kolizji stylów.
Twierdzi, że „czytelność” i „ponowne użycie” ...
Nie wiem, czy powiedziałbym nowemu deweloperowi, że BEM jest bardziej czytelny. Mogę powiedzieć, że zapewnia pewne dobrze zdefiniowane wytyczne dotyczące znaczenia i struktury klas.
Widzę klasę jak
.foo--bar__baz
Mówi mi, że istnieje fooblok, który jest w barstanie i zawiera bazelement.
Absolutnie powiedziałbym, że BEM jest bardziej wielokrotnego użytku niż klasyczny model.
Jeśli dwóch programistów utworzy bloki ( fooi bar), a oba bloki mają nagłówki, mogą bezpiecznie ponownie użyć swoich bloków w różnych kontekstach bez obawy o kolizję nazewnictwa.
To dlatego, że w klasycznym kontekście .foo .headingi .bar .headingbyłoby sprzeczne i wprowadzają konflikt specyficzności, które muszą zostać rozwiązane, ewentualnie na podstawie indywidualnego przypadku.
W witrynie BEM klasy byłyby .foo__headingi .bar__heading, co nigdy nie byłoby sprzeczne.
Twierdzi, że „zagnieżdżony CSS jest anty-wzorcem”. Co to znaczy „anty-wzór” i dlaczego zagnieżdżony CSS jest zły?
„Anty-wzorzec” to wzorzec kodowania, który dla niedoświadczonych programistów jest łatwiejszy do nauczenia się i używania niż bardziej odpowiednia alternatywa.
O ile zagnieżdżony CSS jest zły: zagnieżdżanie zwiększa specyficzność selektora. Im wyższa specyficzność, tym więcej wysiłku potrzeba, aby ją zastąpić. Niedoświadczeni programiści często martwią się, że ich CSS może wpływać na wiele stron, dlatego używają selektorów takich jak:
#something .lorem .ipsum .dolor ul.sit li.amet a.more
Gdy doświadczony programista martwi się, że jego CSS może nie wpływać na wiele stron, używają selektorów takich jak:
.more
Twierdzi, że „wszyscy zmierzają w kierunku korzystania z BEM, więc my też powinniśmy”.
To błędne podejście , więc zignoruj to jako zły argument. Nie wpadnij w pułapkę błędnego błędu , ponieważ zły argument na poparcie BEM nie jest powodem, by sądzić, że BEM nie może być dobry.
Czy ktoś mógłby szczegółowo wyjaśnić, co czyni BEM lepszym niż LESS?
Omówiłem to wcześniej, BEM i MNIEJ nie są porównywalne. Jabłka i Pomarańcze itp.
Mój kolega kompletnie mnie nie przekonuje, ale nie wiem, czy mam wybór, ale podążać.
Polecam przyjrzeć się OOCSS, SMACSS i BEM i rozważyć zalety i wady każdej metodologii ... jako zespół . Używam BEM, ponieważ podoba mi się jego ścisłość formatu i nie mam nic przeciwko brzydkim selektorom, ale nie mogę powiedzieć, co jest odpowiednie dla ciebie lub twojego zespołu. Nie pozwól jednemu otwartemu osobiście uruchomić program. Jeśli nie czujesz się dobrze z BEM, pamiętaj, że istnieją inne alternatywy, które mogą być łatwiejsze do wsparcia dla twojego zespołu. Być może będziesz musiał bronić swojej pozycji ze współpracownikiem, ale w perspektywie długoterminowej prawdopodobnie będzie to miało pozytywny wpływ na wynik twoich projektów.
Naprawdę wolałbym docenić BEM, niż niechętnie to zaakceptować.
Napisałem odpowiedź na StackOverflow, która opisuje, jak działa BEM . Ważną rzeczą do zrozumienia jest to, że twoje idealne selektory powinny mieć specyfikę 0-0-1-0, aby były łatwe do zastąpienia i rozszerzenia.
Wybór BEM nie oznacza, że musisz się poddać MNIEJ! Nadal możesz używać zmiennych, nadal możesz używać @imports, a na pewno możesz nadal używać zagnieżdżania. Różnica polega na tym, że renderowany wynik ma być pojedynczą klasą, a nie łańcuchem potomnym.
Gdzie mogłeś
.widget {
.heading {
...
}
}
Z BEM możesz użyć:
.widget {
&__heading {
...
}
}
Dodatkowo, ponieważ BEM obraca się wokół pojedynczych bloków, możesz łatwo podzielić kod na osobne pliki. widget.lesszawiera style dla .widgetbloku, a component.lesszawiera style dla .componentbloku. To znacznie ułatwia znalezienie źródła dla dowolnej konkretnej klasy, chociaż nadal możesz chcieć korzystać z map źródłowych.