Современная верстка: БЭМ

Как не накосячить с версткой сайта

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

Верстка — это своеобразный «перевод» дизайнерского макета на компьютерный язык, чтобы разработанный визуальный интерфейс стал функциональным. Версткой занимаются фронт-энд программисты. Получив дизайн-макет, они делят его на отдельные изображения, задают структуру страницы и пишут скрипты для взаимодействия интерфейса с пользователями. В результате получается документ, где прописаны все ключевые параметры интерфейса сайта — расположение его элементов, сценарии использования кнопок, анимация.

Именно верстка определяет то, как, в конечном итоге будет выглядеть сайт. Если разработчик накосячит — ресурс будет выглядеть совсем не так, как задумывался. Верстка влияет и на скорость загрузки — например, грамотный разработчик подберет оптимальные размеры для картинок и видео, а также не будет нагромождать друг на друга километры кода.

Признаки хорошей верстки

При увеличении или уменьшении масштаба все блоки отображаются так, как было задумано в дизайне — ничего не съезжает, блоки не перекрывают друг друга;
Сайт прекрасно адаптируется к разрешению любого (почти) устройства;
Анимация работает плавно, без зависаний;
Сайт быстро загружается и не тормозит;
Корректно заданы все отступы между блоками;
Изображения и видео заданы в оптимальном размере, который не вызывает «подвисания» сайта;
Где необходимо, используется lazy load — элементы сайта подгружаются, только когда пользователь непосредственно взаимодействует с ними. Это позволяет быстрее загружать страницы.

Иными словами, хорошая верстка — незаметная верстка. Если пользователь не испытывает неудобств во время нахождения на сайте, у него не возникает вопросов или раздражения по поводу тех или иных сценариев взаимодействия — значит, верстальщик поработал достойно.

История развития верстки

Изначально, когда все сайты были более-менее похожими, а дизайн — простым (можно даже сказать, что как такового, дизайна не было вовсе), везде использовались одни и те же принципы верстки. Но с развитием технологий появились возможности использовать нестандартные визуальные приемы. На это оказало влияние появление в 1994 году браузера Netscape, который поддерживал более сложные технологии, позволяющие сделать сайт уникальным и выделяющимся. Понятие веб-дизайна начало развиваться, а значит, потребовались новые правила верстки.

В конце 1990-х количество популярных браузеров начало расти, приходилось разрабатывать сайты так, чтобы они корректно отображались в любом браузере. Тогда же и появляется профессия верстальщика. Если раньше одни и те же специалисты и «рисовали» сайт, и писали код, то теперь совмещать две этих спецификации становилось все сложнее. Принципы верстки тоже менялись и усложнялись.

Табличная верстка

Этот принцип появился, когда возникла необходимость «подгонять» сайты под различные браузеры и устройства — то есть, еще в 1990-х. Табличный метод представлял из себя стандартные ячейки, в каждую из которых размещался контент. Можно было задать определенные размеры самой таблицы, а столбцы и строки подстраивались под разные разрешения экрана. Конечно, такой способ был еще далек от идеала, но он уже позволял более-менее корректно отображать сайт на любом устройстве. Стоит отметить, что в те времена ещё не было мобильных устройств, так что речь про несколько стандартных разрешений дисплеев. Сейчас табличная верстка уже не используется.

Недостатки табличного метода:

Невозможность сделать адаптив для мобильных устройств.
Высокая сложность модификации и внесения изменений.
Если таблица большая, то скорость загрузки сайта может быть низкой. А сам сайт показывается полностью, только когда загружена вся таблица.
Чтобы разместить элемент по центру, необходимо оставлять слева и справа от него несколько пустых ячеек — это значительно утяжеляет код.
Если кода в верстке больше, чем текстового контента, это тоже негативно сказывается на поисковой выдаче.

Верстка слоями

Метод получил распространение в период развития браузера Netscape — он был также разработан этой компанией. Этот способ стал значительным шагом вперед. Теперь содержимое сайта можно было выкладывать «слоями», включая и выключая их видимость, задавая параметры и определяя положение на странице. Метод позволил создавать динамический контент и значительно облегчать код. Параметры слоя уже устанавливаются не физическими размерами, а с помощью применения стилей, которые позволяют задавать ширину и высоту блока, его внешний вид и т. д.

Недостатки послойного метода:

Требует очень высокой квалификации верстальщика;
Сайты, сверстанные этим методом, не всегда одинаково отображаются в разных браузерах.

Верстка блоками

Верстка слоями получила не очень широкое распространение, но стала основой для развития нового метода — верстки блоками. Этот принцип позволил создавать четкую иерархию веб-страницы — определять, где будут находиться главные, второстепенные и служебные элементы. Основным структурным элементом здесь выступают блоки-прямоугольники, которые, в свою очередь, можно делить на другие прямоугольники.

Блочный метод дает верстальщику столь необходимую гибкость в представлении информации. Например, можно расположить в одном блоке все содержимое страницы, можно сделать отдельные блоки для каждого экрана, а можно — создать свои контейнеры для дизайн-элементов, текстового контента и т. д.

Недостатки блочной верстки:

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

Верстка фреймами

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

Фреймы позволяют создавать максимально легкие сайты, но такой подход имеет свои недостатки:

Фреймы хуже всего индексируются поисковиками, так как из-за особенностей верстки не на всех страницах есть навигация;
Внутренние страницы не имеют отдельного URL, поэтому пользователь не может добавить их в закладки;
Совместимость с различными браузерами серьезно страдает.

В настоящее время чаще всего используется блочный метод верстки — но, конечно, он претерпел значительный изменения с момента своего изобретения.

Основные подходы к верстке

Один из главных принципов верстки — единое и оптимизированное отображение сайта на любом устройстве и в любом браузере. Довольно долго этому практически не уделялось внимания, верстка была фиксированной. То есть, на широких экранах по краям от макета образовывались белые поля, а на экране мобильного сайт отображался просто как уменьшенная копия десктопного варианта.

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

Резиновая верстка

При этом подходе ширина страниц задается в процентном соотношении к размеру экрана. Например, мы можем указать, что при ширине экрана в 1080 px ширина блоков будет равна 50% от основного размера.

Недостаток подхода в том, что не всегда можно сохранить юзабилити сайта, значительно растянув или уменьшив блоки. К тому же, создать качественную резиновую верстку сложно — необходимо очень точно просчитать, какие размеры будут иметь те или иные элементы сайта, задать каждому элементу свой параметр, чтобы в целом все смотрелось хорошо на любом устройстве.

Адаптивная верстка

При этом подходе верстка адаптируется для нескольких разрешений экрана. Обычно это делается для 4 основных разрешений, которые различаются по ширине:

Широкий экран: от 1920 px;
Экран ноутбука: 1280−1919 px;
Экран планшета: 768−1279 px;
Экран смартфона: 320−767 px.

При адаптивной верстке элементы могут менять не только размер, но и положение относительно друг друга. Например, на экране смартфона горизонтально расположенные блоки могут стать вертикальными. Делать такую верстку даже проще, чем резиновую, но более трудоемко — код получается объемнее, так как все параметры для разных страниц умещаются в одном документе. При этом все элементы сами по себе остаются неизменными. В результате может страдать юзабилити. Чтобы этого не случилось, необходимо предусматривать, чтобы все элементы одинаково хорошо смотрелись на любом экране, а это не всегда возможно.

Отзывчивая верстка

Такой подход подразумевает гибрид между резиновой и адаптивной версткой. При нем контент сайта динамически адаптируется к разрешению экрана. Например, некоторые блоки могут просто менять размер в процентном соотношении — как в резиновой верстке, а другие будут подстраиваться под разрешение экрана — как в адаптивном подходе.

Сейчас отзывчивая верстка используется чаще всего.

Создание мобильной версии

Этот подход подразумевает создание отдельных версий верстки для каждого популярного разрешения — например, для десктопа, планшета и смартфона. Такой подход хорош тем, что позволяет сделать любую версию сайта максимально удобной для пользователя. Например, в мобильной версии могут меняться не только размеры контента, но и внешний вид меню, принципы взаимодействия с блоками, и даже состав страниц.

Конечно, такой подход наиболее сложный и дорогой, но он позволяет предоставить пользователям максимально удобный интерфейс, а также более эффективно настроить рекламу — например, вести трафик из социальных сетей сразу на мобильную версию.

Что такое БЭМ

БЭМ — это современный метод верстки, который расшифровывается как «блок — элемент — модификатор». БЭМ позволяет соблюдать единые правила верстки, которые помогают быстро разрабатывать интерфейсы, гибко их настраивать и легко модифицировать.

БЭМ был разработан в Яндексе. С развитием компании появлялась необходимость в создании большого количества онлайн-продуктов. И так как каждый разработчик в то время работал по своим правилам, с обеспечением быстрой командной работы было сложно. Тогда было решено создать единый метод верстки. Вот какие принципы легли в основу БЭМ:

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

Итак, по принципу БЭМ вся верстка делится на:

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

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

Плюсы БЭМ:

Главный плюс — это единообразие. Сразу понятно, из каких блоков состоит страница, какие элементы имеются в каждом блоке, и какие модификаторы в них применены.
БЭМ обеспечивает гибкость разработки. За счет применения модификаторов к элементам можно гибко настраивать адаптацию к различным разрешениям экрана.
Удобно работать командой — блоки не зависят друг от друга, поэтому разработчики не будут мешать друг другу при работе над одним и тем же интерфейсом.
Легко оптимизировать сайт — вместо того, чтобы лезть в код и искать место, которое нужно переписать, можно заменить отдельный блок. И пока он будет редактироваться, верстка не развалится.

Минусы БЭМ:

Длинные названия модификаторов или элементов могут показаться сложными для разработчиков, которые не сталкивались с БЭМ.
Любые, даже мелкие, компоненты сайта верстаются только блоками. Это может быть неудобно для верстки, например, небольших кнопок, дропдаунов, субтайтлов и т. д.

В принципе, минусы БЭМ оказываются несущественными по сравнению с тем удобством, которое несет в себе этот метод.

Есть ли альтернативы БЭМ?

Двумя основными альтернативами БЭМ являются SMACSS и ECSS.

Методология SMACSS предполагает использование правил для отдельных категорий CSS: базовые правила, категории для стилей, категории для внешнего вида и т. д. А сама верстка выполняется при помощи модулей, к которым применяются эти правила. В отличие от БЭМ, метод SMACSS не предполагает жесткого наименования элементов. С одной стороны, это сокращает объем кода, но с другой — негативно влияет на его единообразие.

ECSS предлагает собирать верстку из уникальных компонентов. Дубликат одного компонента, даже если он имеет даже самые незначительные отличия, должен верстаться как новый компонент. Также этот метод уделяет большое внимание единому именованию. За счет большого количества компонентов код становится тяжелее, но зато удаление одного из них никак не сказывается на коде, потому что все компоненты независимы.

Эти альтернативы похожи на БЭМ, так как стремятся к единообразию кода, но БЭМ как бы сочетает их черты — строгость к наименованию, но гибкость в создании компонентов.

Вместо заключения

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

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