Школа БЭМ. Введение для начинающих

Школа БЭМ. Введние для начинающих

Приветствую. Я решил сделать серию обучающих статьей под названием школа БЭМ. Сейчас перед вами введение для начинающих.

Что такое БЭМ?

Как вы, наверное, знаете, любая веб-страница состоит из 3-х вещей: html-кода, стилей css и кода javascript.

Расскажу чуть подробнее. Чтобы создать страницу вы пишете текст, различные элементы типа картинок или видео (и др.). И оформляете все в виде html-кода. Зачастую нет смысла прописывать стили в коде html. Мы просто подключаем стили оформления к странице и html-код отображается в браузере в нужном нам виде. Такие стили называются стили css. Сам html-код состоит из тэгов — html, body, p, div, span и т.п.

И теперь мы подошли к моменту, когда нужно этот написанный html-код каким-то образом разметить, чтобы браузер знал, что такие-то стили нужно применить к таким-то тэгам, а такие-то к другим.

В html-коде можно прописать идентификатор для каждого тэга при помощи атрибута id (он должен быть уникальным на данной странице):

Либо для любого тэга можно прописать класс (они не обязательно должны быть уникальны):

В стилях мы можем прописать оформление:

Еще один вариант — прописать оформление через селекторы тэгов. Другими словами, мы не будем в данном случае указывать класс тэгов (тэга) или идентификатор тэга, а присвоим оформление сразу для всех тэгов определенного типа. Ну, например:

Когда тэгов и стилей мало, все в порядке — в их структуре можно легко разобраться. А вот кода в коде к примеру 10000 строк, тут необходима удобная структура. Данную структуру и разработали программисты Яндекса в 2005 году.

Как говорится в руководстве на этом сайте: БЭМ расшифровывается как Блок, Элемент, Модификатор и является компонентным подходом к веб-разработке. В основе БЭМ находится принцип разделения интерфейса на структуру независимых блоков. Он позволяет удобно и качественно создавать интерфейсы любой сложности, а также повторно использовать уже написанный код, избегая способа «Скопировал-Вставил».

Приведу пример верстки с использованием БЭМ:

Просто, четко, и элегантно!

Добавлю сюда, что также для удобной работы с html-кодом имеется программное средство под названием Emmit. Я думаю написать статью и по этой технологии. Так что не забывайте заходить в гости! Кстати, я не дал вам мясо самого БЭМа. Обещаю исправиться)

Щелкните ниже, чтобы поставить оценку!
Всего: 0 В среднем: 0

Написать комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *