Тематические статьи →

БЭМ и независимые блоки

Вёрстка неза­ви­си­мыми бло­ками — это мето­до­ло­гия, кото­рая была сфор­му­ли­ро­вана Вита­лием Хари­со­вым из ком­па­нии Яндекс. Впо­след­ствии эта мето­до­ло­гия была рас­ши­рена и полу­чила назва­ние БЭМ (Блок-Эле­мент-Моди­фи­ка­тор). Соб­ственно БЭМ нужен для упро­ще­ния команд­ной раз­ра­бот­ки, для уни­фи­ка­ции интер­фей­сов и для более актив­ного повтор­ного исполь­зо­ва­ния про­грамм­ного кода.

Тер­ми­но­ло­гия

Блок — неко­то­рая само­сто­я­тель­ная сущ­но­сть, может быть про­стым или состав­ным (то есть содер­жать в себе дру­гие блоки).

Эле­мент – это состав­ная часть бло­ка, отве­ча­ю­щая за отдель­ную функ­цию, эле­мент может нахо­диться только в составе бло­ка.

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

Прин­ципы БЭМ

Неза­ви­си­мость бло­ков. Независимый блок реа­ли­зо­ван так, что его можно вста­вить в любое место на стра­ни­це: то есть блоки в рам­ках БЭМ сво­бодно пере­ме­ща­емы и могут вкла­ды­ваться друг в дру­га. В CSS для этого исполь­зу­ются уни­каль­ные селек­торы (классы) для име­но­ва­ния бло­ков и эле­ментов, не исполь­зу­ются пра­вила на основе назва­ний тегов и мини­ми­зи­ро­ваны кас­ка­ды. В плане JS это озна­чает исполь­зо­ва­ние в каче­стве селек­то­ров клас­сов без кас­ка­ди­ро­ва­ния.

Повто­ря­е­мость бло­ков. Методология БЭМ осно­вана на том, что любой блок может встречаться на стра­нице более одного раза. Это озна­чает, что для сти­ле­вого оформ­ле­ния и для скрип­тов все­гда исполь­зу­ются клас­сы, а не назва­ния тегов и не иден­ти­фи­ка­то­ры.

Моди­фи­ци­ру­е­мость бло­ков и эле­ментов. Внешний вид блока или эле­мента, а также их пове­де­ние могут быть пере­опре­де­лены при помощи моди­фи­ка­то­ров и одно­вре­менно для блока или эле­мента может исполь­зо­ваться несколько раз­ных моди­фи­ка­то­ров. Моди­фи­ка­торы являются дополнительным CSS-клас­сом блока или эле­мента.

Пред­мет­ная абстракция. При команд­ной раз­ра­ботке должна исполь­зо­ваться еди­ная тер­ми­но­ло­гия, это каса­ется пра­вил име­но­ва­ния бло­ков, эле­ментов и моди­фи­ка­то­ров.

Кон­си­стент­ность бло­ка. Каждый блок дол­жен знать всё о себе: раз­мет­ка, сти­ле­вое оформ­ле­ние, пове­де­ние и исполь­зу­е­мые бло­ком ресурсы (изоб­ра­же­ния, напри­мер) должны быть собраны вме­сте, чтобы моди­фи­ка­ция блока была про­стой и удоб­ной для разработчиков.

Поделитесь с друзьями:


Информация о публикации:

Материал опубликован в 2014 году. Эта статья о веб-разработке и про фронтенд-разработку. При пере­пуб­ли­ка­ции обя­за­тельно ука­за­ние пер­во­ис­точ­ника в виде гипер­тек­сто­вой ссылки на сайт web-creator.ru

Воспользуйтесь нашими
знаниями и опытом

Отправьте нам сообщение при помощи формы. Или напишите на e-mail s@web-creator.ru

Мы максимально оперативно ответим Вам по электронной почте или перезвоним.

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

Либо просто позвоните нам по номеру: +7 495 215-1501

Мы работаем по будним дням с 10 до 19 часов.

Комплексные услуги

Реализация «под ключ» проектов по созданию различных видов сайтов, разработка веб-приложений для автоматизации бизнес-процессов, ведение контекстных и медийных рекламных кампаний, поисковое продвижение, комплексная поддержка веб-проектов, консалтинговые услуги.