HTML code reveiw. Czy dobrze rozumiem metodyke BEM ?

Question

Witam,

uczę się pisać strony zgodnie z BEM. Zrobiłem prosty szablon i chciałbym aby ktoś bardziej doświadczony mógł ocenić czy dobrze rozumiem.

Na stronie są 3 bloki section z elementami header i content z odpowiednimi modyfikatorami.

https://codepen.io/anon/pen/rgLqmG

Answer 1

Hej jest dosyć dobrze błędy głównie w CSS. Moje zrozumienie BEMa na początku było na o wiele niższym poziomie ;D 

Uwagi : 

1) Selektor do znacznika body i img 

W znaczniku body możesz stworzyć blok całej strony i nazwać go np page. W selektorze body .section__content--gallery img powinieneś zastosować klasę elementu.

 

2) Zagłębienia w SCSS 

Masz stworzone zagłębienia w SCSS przez to twój kod generuje selektory w taki sposób :

body .top__container .top__content

Aby mówić o poprawnym BEM selektor powinien wyglądać tak :

.top__content

Jak to osiągnąć ?  Każdy blok pownien tworzyć strukture od zera np :
 

.page {
    background: #FAFAFA;
    font-family: 'Lato', sans-serif;
    height: 100vh;
}

.top {
    [...]
    background-attachment: fixed;
    &__container{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
          
    }

    &__content{
        cursor: pointer;
        margin: auto;
        width: 200px;
        color: white;
        text-align: center;
        font-size: 30px;
    }
}

Zwróć uwagę ze container i content są osobnymi elementami i nie powinny być zależne od siebie. Tak jest łatwiej zapanować nad wagami selektów. 

3) Modyfikator elementu modyfikuje inne elementy tu też wypadało by kod trochę przebudować. Mam na myśli kawałek 

&__content {
    font-size: 20px;
    padding-left: 50px;
    padding-right: 50px;
    &--description{
        display: flex;
        justify-content: space-between;
        .content__text{
            width: 60%;
        }
    }
}

Jest to bardzo złe że modyfikator elementu wpływa na inny element. Łatwiej się pogubić. Jeśli chcesz jednym modyfikatorem zmienić wiele elementów dodaj modyfikator do całego bloku.

.section {
    padding-bottom: 50px;
    margin: auto;
    width: 70%;
    color: black;
    &__header{
        padding: 5px;
        [...]
    }
    &__content{
        font-size: 20px;
        padding-left: 50px;
        padding-right: 50px;
    }

    &--description &__content{
        display: flex;
        justify-content: space-between;
    }

    &--description &__text{
        width: 60%;
    }
}

Pamiętaj żeby zmienić miejsce modyfikatora w HTMLu ;) 

Jeśli chcesz jeszcze poczytać o BEM mogę Cię odesłać do mojego artykuły może coś rozjaśni. https://budzis.pl/Wpisy/Kursy/Optymalizacja-stron/Metodologia-BEM/ Jeśli nie to pytaj ;)