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

Code review BEM

VPS Starter Arubacloud
+1 głos
229 wizyt
pytanie zadane 19 sierpnia 2022 w HTML i CSS przez Hoorder Początkujący (470 p.)

Cześć.

W poprzednim codereview mojego projektu, została zwrócona mi uwaga na pewien element kodu, który wygląda następująco:

Kod codepen - stara wersja

Problemem było ponowne wykorzystanie 

.aboutMe__title

dodając do tego także nazwę
innego elementu czyt. -welcome, -headline oraz -subline.


Postanowiłem zamienić cały blok z

"aboutMe__title aboutMe__title-welcome"

na

"aboutMe__title aboutMe__title--mod"

w kodzie scss poruszam się po tych trzech elementach za pomocą pseudo-elementu ::nth-child() i finalnie mój kod wygląda tak:

Kod codepen - nowa wersja

Kod scss również uległ zmianie.


Czy moja propozycja rozwiązania problemu jest prawidłowa i zgodna z konwencją? 

1 odpowiedź

+1 głos
odpowiedź 19 sierpnia 2022 przez Comandeer Guru (599,730 p.)
wybrane 20 sierpnia 2022 przez Hoorder
 
Najlepsza

Nie jest zgodna.

Przykładowy kod zgodny z BEM:

<div class="aboutMe">
  <h3 class="aboutMe__headline">Witaj!</h3>
  <h2 class="aboutMe__name">Jestem Adam Kowalski,</h2>
  <h1 class="aboutMe__role">web developer - freelancer</h1>
  
  <button class="aboutMe__btn">Zobacz moje portfolio</button>
</div>

W bloku (.aboutMe) powinny być poszczególne elementy pełniące konkretne role. Każdy z elementów w Twoim div tak naprawdę pełni inną rolę, więc powinno to mieć odzwierciedlenie w BEM-ie.

Dodanie .aboutMe__title do buttona sugeruje, że jest jakimś tytułem – a nie jest w żaden sposób. Dodanie tutaj .aboutMe__title--btn nie zmienia nic, bo to jedynie oznaczałoby tytuł w przyciskowym wariancie, co nie bardzo ma sens. A tak każdy element ma swoją określoną rolę.

W teorii można zrobić jeszcze inaczej: nagłówki potraktować jako jeden element, .aboutMe__heading, i rozróżniać przy pomocy modyfikatorów:

<div class="aboutMe">
  <h3 class="aboutMe__heading aboutMe__heading--headline">Witaj!</h3>
  <h2 class="aboutMe__heading aboutMe__heading--name">Jestem Adam Kowalski,</h2>
  <h1 class="aboutMe__heading aboutMe__heading--role">web developer - freelancer</h1>
  
  <button class="aboutMe__btn">Zobacz moje portfolio</button>
</div>

Jednak tutaj raczej szedłbym w tę pierwszą wersję. Zwłaszcza, że tak po prawdzie tylko Twoje imię powinno być tutaj nagłówkiem:

<section class="aboutMe">
  <p class="aboutMe__headline">Witaj!</p>
  <h1 class="aboutMe__name">Jestem Adam Kowalski,</h1>
  <p class="aboutMe__role">web developer - freelancer</p>
  
  <button class="aboutMe__btn">Zobacz moje portfolio</button>
</section>

Podobne pytania

+1 głos
0 odpowiedzi 304 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez Napromieniowany Użytkownik (570 p.)
+1 głos
1 odpowiedź 201 wizyt
+1 głos
0 odpowiedzi 108 wizyt
pytanie zadane 13 kwietnia 2022 w HTML i CSS przez Hoorder Początkujący (470 p.)

92,454 zapytań

141,262 odpowiedzi

319,088 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!

...