Школа БЭМ. Введение для начинающих
Приветствую. Я решил сделать серию обучающих статьей под названием школа БЭМ. Сейчас перед вами введение для начинающих.
Что такое БЭМ?
Как вы, наверное, знаете, любая веб-страница состоит из 3-х вещей: html-кода, стилей css и кода javascript.
Расскажу чуть подробнее. Чтобы создать страницу вы пишете текст, различные элементы типа картинок или видео (и др.). И оформляете все в виде html-кода. Зачастую нет смысла прописывать стили в коде html. Мы просто подключаем стили оформления к странице и html-код отображается в браузере в нужном нам виде. Такие стили называются стили css. Сам html-код состоит из тэгов — html, body, p, div, span и т.п.
И теперь мы подошли к моменту, когда нужно этот написанный html-код каким-то образом разметить, чтобы браузер знал, что такие-то стили нужно применить к таким-то тэгам, а такие-то к другим.
В html-коде можно прописать идентификатор для каждого тэга при помощи атрибута id (он должен быть уникальным на данной странице):
1 2 3 | <div id="some-identificator"> <span>html code.</span> </div> |
Либо для любого тэга можно прописать класс (они не обязательно должны быть уникальны):
1 2 | <span class="some-text-class">some text.</span> <span class="some-text-class">some extra text.</span> |
В стилях мы можем прописать оформление:
1 2 3 4 5 6 | #some-identificator { color: red; } .some-text-class { color: black; } |
Еще один вариант — прописать оформление через селекторы тэгов. Другими словами, мы не будем в данном случае указывать класс тэгов (тэга) или идентификатор тэга, а присвоим оформление сразу для всех тэгов определенного типа. Ну, например:
1 2 3 4 5 6 | div { color: red; } div p:first-child a { text-decoration: none; } |
Когда тэгов и стилей мало, все в порядке — в их структуре можно легко разобраться. А вот кода в коде к примеру 10000 строк, тут необходима удобная структура. Данную структуру и разработали программисты Яндекса в 2005 году.
Как говорится в руководстве на этом сайте: БЭМ расшифровывается как Блок, Элемент, Модификатор и является компонентным подходом к веб-разработке. В основе БЭМ находится принцип разделения интерфейса на структуру независимых блоков. Он позволяет удобно и качественно создавать интерфейсы любой сложности, а также повторно использовать уже написанный код, избегая способа «Скопировал-Вставил».
Приведу пример верстки с использованием БЭМ:
1 2 3 4 5 6 7 8 | <!-- Блок `my-search-form` --> <form class="my-search-form"> <!-- Элемент `input` блока `my-search-form` --> <input type="text" class="my-search-form__input"> <!-- Элемент `button` блока `my-search-form` --> <button class="my-search-form__button">Поиск...</button> </form> |
Просто, четко, и элегантно!
Добавлю сюда, что также для удобной работы с html-кодом имеется программное средство под названием Emmit. Я думаю написать статью и по этой технологии. Так что не забывайте заходить в гости! Кстати, я не дал вам мясо самого БЭМа. Обещаю исправиться)