Czy można stworzoną klasę w JavaScript/jQuery zaimplementować do BEM?

pytanie zadane 15 kwietnia 2018 w JavaScript przez Rash Użytkownik (620 p.)
edycja 15 kwietnia 2018 przez Eryk Andrzejewski

Borykam się z pewnym problemem, na który jeszcze nie znalazłem odpowiedzi. Korzystam w moich projektach z BEM, aczkolwiek nie wiem, czy istnieje jakakolwiek opcja, żeby klasa stworzona np. poprzez "toggleClass" została zaimportowana do BEM? Zależy mi na tym, żeby trzymać się pewnych narzuconych przez siebie standardów:

$(function() {
   $('.off-canvas__toggle').on('click', function(e) {
      $('body').toggleClass('navigation-show');
   });
});

"navigation-show" >>> utworzona klasa

.navigation-show .page-content {
        left:0;
}

Tylko w taki sposób mogę się odwołać do: "navigation-show" . Utworzenie w dokumencie HTML klasy: "navigation-show", a następnie; "navigation-show__page-content" nie działa poprawnie używając metodologii BEM.

1 odpowiedź

odpowiedź 15 kwietnia 2018 przez rafal.budzis Szeryf (85,260 p.)

Musisz utworzyć blok lub element bloku a opcje pokazywania zrobić na modyfikatorze. Musiał byś pokazać cały kod HTML od tego bloku aby ci pomóc.

komentarz 15 kwietnia 2018 przez Rash Użytkownik (620 p.)

Proszę bardzo:

https://codepen.io/Agrasher/pen/OverKN

komentarz 15 kwietnia 2018 przez rafal.budzis Szeryf (85,260 p.)
edycja 15 kwietnia 2018 przez rafal.budzis

Masz kilka mało rażących błędów ;) w samym BEM ale zacznijmy od tego o co pytasz. Najsensowniejszym sposobem było by stworzenie tego w taki sposób :

$('.off-canvas__toggle').on('click', function(e) {
     $('.page-content').toggleClass('page-content--openMenu');
     $('.navigation').toggleClass('navigation--show');
});

Odnośnie błędów w samej metodologi BEM to klasa off-canvas__toggle--modifier nie powinna być modyfikatorem tylko elementem. Zdjęcie ma klase modyfikatora navigation__logo--alteration ale nie ma klasy elementu.

komentarz 15 kwietnia 2018 przez Rash Użytkownik (620 p.)

Dziękuję za odpowiedź :) Jeszcze w ramach upewnienia się:

<span class="off-canvas__toggle">
   <span class="off-canvas__example"></span>
   <span class="off-canvas__example"></span>
   <span class="off-canvas__example"></span>
</span>

Czy taka formuła będzie poprawna?

<h1 class="navigation__logo">
    <a href="#" class="navigation__relay">
          <img src="img/logo.png" alt="Logo" class=" navigation__logo navigation__logo--alteration">
     </a>
</h1>

I taka ?

komentarz 16 kwietnia 2018 przez rafal.budzis Szeryf (85,260 p.)

Tak gdy stosujesz modyfikator musisz mieć też klasę elementu bo modyfikator tylko modyfikuje jakąś podstawę ;) Czasem nie potrzeba modyfikatora wtedy lepiej zrobić kolejny element nazwany nieco inaczej. Możesz tez zerknąc na moją strone jako lekki przykład użycia BEMa ;) Chociaż jest to trochę pomieszane z gridem podobnym do bootstrapa. http://budzis.pl/