1. 17. 1. Введение
Last updated
Last updated
Вы, наверное, ещё не знаете до конца, зачем же вам нужен БЭМ и что это такое.
БЭМ — это система «Блок — Элемент — Модификатор». Это один из подходов к компонентной вёрстке и одна из самых распространённых в мире методологий вёрстки (). Если вы планируете верстать в настоящем рабочем процессе, то вы наверняка столкнётесь с БЭМ или другими методологиями, возможно, основанными на БЭМ.
Это такой подход к вёрстке, когда отдельные компоненты сайта создаются изолированно и могут использоваться в любом месте, вне зависимости от окружения и содержания.
Вот, например, у вас есть на сайте статистика. На главной странице она повествует о компании в целом, а на странице основного продукта — о его особенностях, и выглядят они чуть-чуть по-разному, но в общем — это одно и то же. И смысл компонентного подхода в том, чтобы эта статистика была совершенно независима от окружения (что вокруг неё? Нет разницы!) и могла использоваться и там, и тут без дополнительной разработки.
Основной принцип — как можно больше переиспользовать (re-use) код. Для этого стоит не верстать по нескольку раз одно и то же.
Потому что это позволяет сделать структуру кода прозрачной. Например, у вас много страниц, и они все сложные, не просто «страница блога», а рейтинги, статистика, новости, баннеры, слайдеры, сайдбары, всплывающие окна, куча навигации. В такой ситуации разработка ресурса, скорее всего, становится делом целой команды.
Кто-то пришёл в проект с самого начала, кто-то присоединился позже. Что делать, если нужно исправить или дополнить какой-то участок? Какими методами искать? До компонентного подхода искали «на память». Кто-то помнил, где лежит этот кусок кода или тратил время на то, чтобы перелопатить весь стилевой файл или постараться найти все места, где используется искомое.
Но большие проекты лучше не привязывать к памяти отдельного разработчика, лучше, чтобы была какая-то системность, которую можно быстро объяснить новому сотруднику. Ещё лучше — если этот новый сотрудник заранее предполагает, что за система лежит в основе ресурса, тогда достаточно объяснить нюансы.
Впрочем, не очень большие проекты тоже лучше писать так, чтобы через год не было мучительно больно вспоминать, где и что написано, и почему так.
С самого начала у меня была какая-то тактика и я её придерживался. — Александр Несяев
Тут нужно сказать, что все, кого мы об этом спрашивали, говорили, что «нужно иметь какую-то методологию и придерживаться её». Так что посмотрим, каких методологий придерживаются чаще всего.
Это: , , , , .
Методологии вёрстки в действии
Да, почему не одна из других систем?
Во-первых, БЭМ всё ещё одна из самых популярных систем в мире.
Во-вторых, он всё-таки требует и довольно детальных объяснений, как и что делать, и рассказа о его философии, и тренировки.
В-третьих, мы сами его используем.
В-четвёртых, это именно система, достаточно разветвлённая и в полном своём формате описывающая не только имена классов, но и файловую систему, и метод написания CSS и JS, и подключение скриптов и стилевых файлов.
В общем, это такая концепция, освоение которой поможет впоследствии войти в почти любую методику без больших потерь, ведь вы научитесь работать с компонентным подходом и придерживаться одного подхода внутри всего проекта.
Если вам интересно посмотреть методологии вёрстки в действии, а не просто узнать их основные принципы, советуем заглянуть на этот .