BEM - czy modyfikator może mieć pseudoklase (np:hover)?

Question

Witam

Treść pytania znajduję się w tytule, ja nie widzę przeszkód aby modyfikator miał pseudoklase, ale nie znalazłem informacji potwierdzającej lub zaprzeczającej, więc chce się upewnić.

I jeszcze drugie pytanie które jest trochę powiązane z pierwszym. W dokumentacji BEM czytamy:

The modifier can define the block's:

• appearance

• behavior

• state

• structure 

 

 Czyli jeżeli mamy blok np .btn(reprezentujący przycisk + ma modyfikator .btn--active) i chcemy aby po najechaniu zmienił kolor napisu na nim z zielonego na czerwony to zapis powinien wyglądać tak?

.btn{
color: green;
}
.btn--active:hover{
color: red;
}

Czy po prostu możemy olać modyfikator i zapisać:

.btn{
color: green;
}
.btn:hover{
color: red;
}

?

Z góry dziękuje za odpowiedzi

Answer 1

Modyfikatorem powinieneś modyfikować to co ustaliłeś jako główny styl. Np:

.btn{
color: green;
}
.btn:hover{
color: red;
}
.btn--active:hover{
color: blue; /* modyfikuje inny styl (zamieniam red na blue) */
}

Tu poprawnie używałbyś modyfikatora łącznie z hover ponieważ hover modyfikatora modyfikuje styl hovera bez modyfikatora.

 

W mojej ocenie NIE poprawnym rozwiązaniem jest np :

.btn{
color: green;
}
.btn--active:hover{
color: red; /* nie modyfikuje żadnego stylu :( - jestem oszustem nie modyfikatorem ! */
}

 

Answer 2

Wydaje mi się, że oryginalna implementacja nie uwzględniała pseudoklas, bo wszystko było sterowane z poziomu JS-a. Tam więc po najechaniu myszą była dodawana odpowiednia klasa.

Niemniej jeśli nie chcesz sterować wszystkiego z poziomu JS-a, to nie widzę zbytnio sensu we wzbranianiu się przed pseudoklasami. I tak nie będziesz w stanie od nich uciec. No chyba że masz modyfikator --hovered i dodajesz do niego :hover – wtedy jest raczej coś nie tego ;)