Ocena strony przerobionej na BEM

pytanie zadane 19 lutego 2020 w HTML i CSS przez michh123 Bywalec (2,790 p.)

Witajcie,

Postanowiłem w ramach nauki BEM przerobić strukturę jakiejś strony zgodnie z metodologią BEM. Wybór padł na film Pana Damiana Wielgosika na kanale "koduje", w którym tworzy stronę. Podzieliłem (a przynajmniej starałem się to zrobić jak najlepiej) tę stronę na bloki i elementy, a w miejscach, gdzie wydawało mi się to słuszne, dodałem modyfikatory. Prosiłbym Was bardzo o code-review oraz wskazówki co można poprawić/zmienić. Głównie zależy mi na ocenie przerobionej strony (link poniżej) pod kątem BEM, struktury HTML i CSS. W kodzie nie ma ARIA oraz skryptu no-js, bo tym wolałbym się zająć mając już w miarę porządną strukturę. Nie ma również obrazków i ścieżek SVG, aby niepotrzebnie nie zwiększać kodu.

Oto link do przerobionej strony:
https://jsfiddle.net/mich2200/L731d26q/4/

Z góry bardzo dziękuję za każdą wskazówkę i konstruktywną krytykę!

1 odpowiedź

odpowiedź 19 lutego 2020 przez Comandeer Guru (601,530 p.)
wybrane 19 lutego 2020 przez michh123

Najlepsza

Dlaczego .heading ma display: none? W takim wypadku równie dobrze można go wgl nie umieszczać…
Nie bardzo widać relacje pomiędzy elementami – a na tym przecież cały BEM się opiera. Np. mamy .header > .heading, .header > .logo, .header > .navigation. To wszystko są samodzielne bloki, nie bardzo widać spoiwo, które je komponuje razem ze sobą. Użyłbym tutaj miksów.
Nie wydzielałbym .container jako osobnego bloku – bo to raczej blok typowo layoutowy, niewnoszący nic do struktury strony. Po prostu elementom, które potrzebują takie style, przypisałbym je bezpośrednio.
Osobiście bym się pozbył .navigation__link--colored na rzecz modyfikatora do samego .navigation (lub znowu miksa), a zmianę koloru linków ograłbym zmiennymi CSS:
```
.navigation--standalone {
	--link-color: #00bfa5;
}

.navigation__link {
	color: var( --link-color, #000 );
}
```

komentarz 19 lutego 2020 przez michh123 Bywalec (2,790 p.)

Wielkie dzięki za odpowiedź i wskazówki! Zaraz biorę się za poprawę ;)

Co do pierwszego punktu: Generalnie kiedy wrzucam stronę na HTML5 Outliner bez tych nagłówków o klasie .heading to Outliner pokazuje Untitled Section w poszczególnych poziomach struktury - stąd te nagłówki (o klasię .heading). Ale jednocześnie nie chcę aby były widoczne na stronie, bo zwyczajnie zaburzają strukturę i czasem utrudniają jej przeglądanie - dlatego nadałem tej klasie display: none. Chciałem to zrobić poprzez visibility: hidden, ale wtedy na stronie pozostaje "puste miejsce" na ukryte nagłówki.

Czy mógłbyś, proszę, rozwinąć drugi punkt? Nie za bardzo rozumiem jaką relację masz na myśli ;) węzły .heading, .logo, .navigation umieszczone w .header ustawiłem jako bloki, ponieważ są niezależnymi komponentami oraz mogą być reużywalne (jak np. blok .navigation, który również spełnia swoją funkcję w stopce). Dlaczego użyłbyś tutaj miksów? :P

komentarz 19 lutego 2020 przez Comandeer Guru (601,530 p.)

Generalnie kiedy wrzucam stronę na HTML5 Outliner bez tych nagłówków o klasie .heading to Outliner pokazuje Untitled Section w poszczególnych poziomach struktury - stąd te nagłówki (o klasię .heading).

HTML5 Outliner jest starym, od lat nierozwijanym produktem, opartym o niedziałający algorytm outline'u. O wiele lepiej korzystać z nagłówkowej hierarchii w walidatorze (i tylko tej, strukturalny outline poniżej również jest całkowicie nieistotny). Co więcej, nie ma sensu tworzyć pod narzędzia – tworzy się pod użytkowników. A żaden użytkownik nie skorzysta z tak ukrytego nagłówka. Można ukryć elementy w sposób dostępny, ale to ostateczność, niepotrzebna w tym wypadku. Tutaj głównym nagłówkiem powinien być tytuł artykułu – bo to jemu poświęcona jest ta konkretna podstrona. Logo nie musi i wręcz nie powinno być nagłówkiem w tym wypadku.

Dlaczego użyłbyś tutaj miksów?

Bo to są niezależne bloki, które równocześnie pełnią funkcję elementów w innych blokach.

komentarz 19 lutego 2020 przez michh123 Bywalec (2,790 p.)

Już widzę, że stosując miksy da się jeszcze fajniej podzielić style w niektórych węzłach, ale czy nie będzie problemu jeśli niektóre elementy miksów nie będą miały swoich reguł CSS? Np:

<div class="section">
    <p class="paragraph section__paragraph">
</div>

.paragraph {
    /* reguły CSS dla bloku paragraph */
}

/* Brak reguł dla elementu section__paragraph */

Taka sytuacja może się trafić, gdy jakiś węzeł będzie miał tylko jeden styl. Jak rozumiem jest to nieistotne, że jakiś element/blok nie będzie miał przypisanych reguł CSS, a mimo wszystko jest zaimplementowany w HTML?

komentarz 19 lutego 2020 przez Comandeer Guru (601,530 p.)

BEM nie jest od CSS-a. To przede wszystkim sposób dzielenia strony na bloki i elementy. To dodatkowo umożliwia bardzo fajne pisanie stylów – ale właśnie: dodatkowo. Jeśli z punktu widzenia struktury coś lepiej pasuje do miksa, to zrobiłbym to miksem, nawet jeśli nie miałoby to odzwierciedlenia po stronie CSS-a.

komentarz 19 lutego 2020 przez michh123 Bywalec (2,790 p.)

Jak zwykle genialnie, wszystkie wątpliwości rozwiane ;)

Wielkie dzięki za ocenę i odpowiedzi na pytania!
Pozdrawiam.

komentarz 24 lutego 2020 przez michh123 Bywalec (2,790 p.)

@Comandeer, przepraszam, że odkopuję temat, ale któryś już dzień z kolei bawię się mixami i modyfikatorami w omawianej powyżej stronie i nie mogę ogarnąć jednej rzeczy. Piszesz, że w niektórych miejscach użyłbyś mixów, ponieważ

to są niezależne bloki, które równocześnie pełnią funkcję elementów w innych blokach

Zacząłem więc poprawiać strukturę i stanąłem w miejscu. Mam mętlik w głowie, bo każdy blok (może poza dziećmi body) zagnieżdżony w innym bloku pełni w tym danym bloku funkcję elementu. Z tego mojego "rozmyślania" wychodzi, że z każdego zagnieżdżonego bloku należałoby zrobić mix. Ostatecznie wychodzą mi potworki w stylu .header__navigation .navigation .navigation--sizeM. Dokumentacja generalnie opisuje użycie mixów podając przykład zewnętrznej geometrii i pozycjonowania, i nie za bardzo znalazłem tam informacje o relacji, którą opisujesz w odpowiedzi. Czy mógłbyś przedstawić pokrótce jak widzisz użycie mixów architektonicznie?

komentarz 24 lutego 2020 przez Comandeer Guru (601,530 p.)

Dokładnie tak jak opisujesz. Nie bardzo widzę w czym jest to potworek?

Jest to element bloku .header zawierający nawigację, stąd .header__navigation. Dodatkowo jest to blok nawigacji, stąd .navigation. I do tego po prostu modyfikator (.navigation--sizeM).

Dokumentacja zresztą podaje takie rozumienie:

Have a mix combining a generic link block and a link element of a menu block. A mix of the two BEM entities will allow us to use the basic link functionality of the link block and additional CSS rules of the menu block without copying the code.

komentarz 24 lutego 2020 przez michh123 Bywalec (2,790 p.)

A czy na kolejnych poziomach zagnieżdżenia postępujemy analogicznie? Np.:

 <header class="header">
        <nav class="header__navigation navigation navigation--sizeM">
            <button type="button" title="Open menu" class="navigation__button hamburger">
            </button>
        </nav>
 </header>

Tutaj z przycisku .hamburger, który jest niezależnym blokiem i może być reużywalny, zrobiłem mixa i dodałem klasę .navigation__button tylko dlatego, że w tym przypadku jest dzieckiem nawigacji .navigation. Czy takie podejście do BEM jest poprawne i na kolejnych poziomach zagnieżdżenia również ustalamy owe relacje poprzez mixy?