• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
429 wizyt
pytanie zadane 15 lipca 2019 w HTML i CSS przez mb-dir Mądrala (6,710 p.)

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:

 

 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

2 odpowiedzi

0 głosów
odpowiedź 15 lipca 2019 przez rafal.budzis Szeryf (85,260 p.)
wybrane 15 lipca 2019 przez mb-dir
 
Najlepsza

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 ! */
}

 

+1 głos
odpowiedź 15 lipca 2019 przez Comandeer Guru (599,730 p.)

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 ;)

Podobne pytania

0 głosów
1 odpowiedź 124 wizyt
pytanie zadane 10 sierpnia 2019 w HTML i CSS przez hun1er76 Stary wyjadacz (11,960 p.)
0 głosów
1 odpowiedź 374 wizyt
pytanie zadane 26 stycznia 2017 w HTML i CSS przez eliano Gaduła (3,640 p.)
0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 15 kwietnia 2018 w JavaScript przez Rash Użytkownik (620 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...