Apr 8 2022 at 22:29

Методология БЭМ

Invite pending

БЭМ - блок элемент модификатор.

Блок — это независимый интерфейсный компонент.

Элемент — это составная часть блока.

Модификатор — это свойство блока или элемента, задающее изменения в их внешнем виде или поведении.

Эта методология создана компанией Yandex в 2005 году. И как бы, вы можете у меня спросить:"Ведь методологий же много, почему именно БЭМ". И правда, методологий верстки и даже методологий стилизации очень много. Например: БЭМ, AMCSS, OOCSS, Atomic CSS, OPOR, MCSS, SMACSS, FUN, DoCSSa и это всего лишь часть. Лично я предпочитаю БЭМ, потому что на реальных проектах скорее всего будет использоваться именно она и эта методология очень удобная. Причем если использовать эту методологию вместе с препроцессорами css (например, scss), то будет очень удобно. Дальше объясню почему.

Итак, начнем со стека знаний для того, чтобы без особых проблем понять эту тему:

html
css

Что-то уж очень много теоретики пошло, начнем изучение.

Для примера и дабы пост не был удален из-за авторских прав, я буду использовать доступный в интернете шаблон(в конце поста будет ссылка на его скачивание)

Давайте для начала разберем проект и посмортим на него. Сначала надо подметить повторяющиеся элементы.

Например, сразу в глаза попадает повторяющиеся строки состояния:

Например на этой фотографии мы видим как идут четыре блока подряд.

Давайте рассмотрим один блок, на основе которого будем делать остальные:

Значит так, в этом блоке есть:

Фотография
Название
Описание

Начнем строить html код. Для начала назову этот блок prof-skills.

<div class="prof-skills"></div>

Кстати, надо отметить, что блоки можно называть двумя способами:

Название блока. Например: skills
Название блока несколькими словами. Я думаю более опытные люди знают, что в верстке сложно обойтись просто указывая название элемента одним словом. Это может привести к путанице в классах в будущем. Поэтому мы можем использовать для указания несколько слов. Например: prof-skills. Но при этом ЗАПРЕЩЕНО указывать имена блоков с нижним знаком подчеркивания. То есть написать "prof__skills" запрещено(дальше будет ясно почему)

Итак, что мы имеем на данном этапе. У нас по сути только блок. Давайте же добавим элементы к нему. Как мы помним, у нас было 3 элемента в этом блоке

<!-- блок -->
<div class="prof-skills">
    <!-- элементы -->
    <div class="prof-skills__img"></div>
    <div class="prof-skills__title"></div>
    <div class="prof-skills__desc"></div>
</div>

Это и есть один из этих 4-х блоков. Давайте немного поясню, чтобы все стало куда понятнее.

Как и было ранее, у нас остался блок. Только к нему я добавил еще 3 тегов div, которым дал класс, который начинается с названия блока и заканчивается названием элемента. Название блока и название элемента отделяются двумя нижними подчеркиваниями.

При этом, если вам надо задать элементу название из нескольких слов, то можно использовать дефис между словами.

Например:

<!-- элемент -->
<div class="prof-skills__my-skills-img"></div>

тут нижнее подчеркивание отделяет опять же имя блока и имя элемента.

При этом и тут ограничений многовато.

Например, элемент одного блока мы не можем использоать в другом блоке.

<!-- блок -->
<div class="prof-skills">
    <!-- элементы -->
    <div class="prof-skills__my-skills-img"></div>
    
    <!-- Нельзя сделать так, так как этот элемент пренадлежит блоку about -->
    <div class="about__title"></div>

    <div class="prof-skills__desc"></div>
</div>

Также нельзя использовать элемент блока вне самого блока. Например такая запись запрещена, так как элемент блока "prof-skills" находится вне своего блока.

<!-- блок -->
<div class="prof-skills">
    <!-- элементы -->
    <div class="prof-skills__my-skills-img"></div>
    <div class="prof-skills__title"></div>
    <div class="prof-skills__desc"></div>
</div>

<!-- такая запись запрещена -->
<div class="prof-skills__title"></div>

Также разрешено делать вложенные элементы, но нельзя наследовать их от родительских. Сейчас станет понятнее.

<!-- запрещено -->
<!-- блок -->
<div class="prof-skills">
    <!-- элементы -->
    <div class="prof-skills__my-skills-img">
        <div class="prof-skills__my-skills-img__user-img"></div>
    </div>
    <div class="prof-skills__title"></div>
    <div class="prof-skills__desc"></div>
</div>


<!-- разрешено -->
<!-- блок -->
<div class="prof-skills">
    <!-- элементы -->
    <div class="prof-skills__my-skills-img">
        <div class="prof-skills__user-img"></div>
    </div>
    <div class="prof-skills__title"></div>
    <div class="prof-skills__desc"></div>
</div>

В первом примере я сделал наследственность от родительского класса(так делать нельзя), во втором же я добавил элемент непосредственно к классу "prof-skills". Причем + в том, что такая вложенность может быть любого уровня.

Чтож, тактично перейдем к модификаторам. Простыми словами модификаторы нужны, чтобы указать какую-то активность. Например у вас происходит что-то при нажатии на кнопку и так далее. Получается, что вы добавляете какое-то активное действие. Модификаторы пишутся так: имя-блока__имя-элемента_имя-модификатора. Самые внимательные уже заметили, что перед именем модификатора стоит один знак нижнего подчеркивания. Все так и должно быть.

Пример:

<!-- блок -->
<div class="header">
    <!-- элементы -->
    <a href="#" class="header__item header__item_active">Home</a>
    <a href="#" class="header__item">About us</a>
    <a href="#" class="header__item">Contact</a>
</div>

Здесь я тегу а, в котором содержится текст "Home", дал модификатор "active". Как можно увидеть из фотографии, тут именно модификатор "header__item_active" дал такое свойство HOME.

Впринципе это все про модификаторы.

Еще есть вещь, которую называют миксами. И это очень удобно!!

Сейчас все расскажу и разложу по полочкам.

Миксы сами по себе нужны для того, чтобы можно было заимствовать свойства у блока, но при этом оставить блок независимым. Сейчас все станет ясно.

<!-- блок -->
<div class="prof-skills">
    <!-- элементы -->
    <div class="prof-skills__my-skills-img"></div>
    <div class="prof-skills__title title"></div>
    <div class="prof-skills__desc"></div>
</div>

В этом коде я в элемент "prof-skills__title" добавил блок title. То есть тут prof-skills__title заимствует все стили у title, но при этом можно менять их. То есть мы можем добавить стили в prof-skills__title и не мешать при этом стилям title. Это удобно, потому что так меньше шанс сломать верстку (имеется ввиду, что у вас в одном месте подходит по стилям, а в другом нет). Безусловно можно использовать атрибут style, но я думаю все знают, что это является плохой практикой и "говнокодом".

В первое время вам будет неудобно использовать эту методологию, но я вас уверяю, если вы начнете, то потом все это будет проходить у вас на автоматизме. Это как со слепой печатью (кто знает).

А в остальном, желаю вам всего доброго и успеха в вашем стремлении :-)

Hubs: