Методология БЭМ — как дизайнеру упростить себе жизнь

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

Задачи дизайнера и верстальщика

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

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

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

Проблемы взаимодействия

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

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

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

Так и что же делать?

Визуальное создание сайтов

Одним из решений проблемы может быть передача процесса верстки сайта непосредственно в руки дизайнера. И нет, для этого ему не придется глубоко погружаться в код и в срочном порядке проходить курсы “Как стать разработчиком за неделю”. В настоящее время достаточно прибегнуть к помощи no-code платформ для создания сайтов. Подобные инструменты, в отличие от простых шаблонных конструкторов, позволяют дизайнерам с нуля сверстать сайт в визуальном редакторе, реализовав любые творческие идеи. При этом результатом будет не просто статичный макет, а готовый работающий сайт, код которого будет сгенерирован автоматически. Звучит неплохо — и дизайнеру свобода творчества, и разработчик может отдохнуть.

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

Дружба с версткой

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

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

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

HTML и CSS

Внешний вид страницы сайта зависит от двух документов: html- и css-файла.

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

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

Классы элементов

Для того чтобы связать элементы из html-файла с их стилями в css-файле, используются классы. Они также позволяют одновременно управлять стилями всех повторяющихся элементов. Как вы понимаете, групповое редактирование также значительно ускоряет и упрощает создание сайта.

Например, вам пришла идея сделать все заголовки на сайте в едином стиле. Для этого вы создаете класс и даете ему имя, пусть это будет “title”. Далее вы устанавливаете для него набор css-стилей, которые вам нужны — название и размер шрифта, начертание, цвет и т.п. Затем присваиваете название этого класса всем заголовкам в html-файле, для которых требуется применить данные стили и всё! Все заголовки автоматически получили единый стиль в один клик. Три простых шага — и нет необходимости прописывать стили для каждого элемента, достаточно сделать это один раз для соответствующего класса.

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

Названия классов со смыслом

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

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

Особенности методологии БЭМ

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

Блок, элемент и модификатор — это три основные термина методологии.

Таким образом:

Преимущества БЭМ

Благодаря использованию БЭМ, каждый компонент на странице входит в иерархическую систему и не пересекается по наименованию с остальными. Это дает четкое понимание назначения и функциональности каждого элемента и делает работу с ними проще и понятнее. Представляете, если вам передадут проект, а там классы будут названы “newclass--13” или “helpme__color5”? То-то же.

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

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

Создавайте дизайн в графическом редакторе и потом верстайте его в no-code платформе — или же сделайте всю работу с использованием одного инструмента, выстраивая прототип и моментально реализуя функционал сайта. Выбирайте способ, который удобнее для вас. Главное, не забывайте отразить в дизайне динамику работы сайта.

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

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

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

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

Taptop поможет вам реализовать эти практики с помощью широкого функционала платформы, дающего возможность использовать профессиональные инструменты, не занимаясь при этом самостоятельным написанием кода.