Что такое Client-First и БЭМ в Webflow. Зачем заказчики требуют или запрещают эти системы?

Введение: «А кто это вам делал?»

Представьте ситуацию: вы заказываете сайт. Разработчик сдает проект, все красиво, анимации летают. Проходит полгода, вы нанимаете другого специалиста, чтобы добавить новую страницу. Он открывает проект, хватается за голову и говорит: «Тут проще переделать с нуля, чем разбираться».

Почему так происходит? Из-за отсутствия системы именования классов.

В вакансиях и ТЗ на разработку Webflow-сайтов все чаще мелькают термины БЭМ (BEM) и Client-First. Одни заказчики пишут: «Строго по Client-First!», другие (чаще западные стартапы) капслоком требуют: «NO CLIENT-FIRST BLOAT».

Давайте разберемся, что это за звери, и на чьей стороне правда (и деньги).

Хаос «свободного художника»

Webflow — это визуальный код. Когда новичок создает кнопку, он просто кидает элемент на холст. Система дает ему имя Link Block 54. Если кнопку нужно сделать красной, он создает Link Block 54 Copy.

Через месяц проект превращается в свалку из Div Block 102, Image 7 и Button New Final 2.

Минус: Поддерживать такой сайт невозможно. Любое изменение ломает верстку в непредсказуемых местах.
Плюс: Это делается очень быстро (на старте).

Чтобы избежать хаоса, программисты придумали правила.

1. БЭМ (BEM) — Дедушка порядка

БЭМ (Блок, Элемент, Модификатор) — методология, придуманная в Яндексе еще в 2000-х. Суть проста: имя каждого элемента должно говорить, где он находится и что делает.

Блок (Block): Независимый контейнер. Например, Card.
Элемент (Element): Часть блока. Card__image (картинка внутри карточки).
Модификатор (Modifier): Вариант внешнего вида. Card--featured (акцентная карточка).

Зачем это бизнесу: Гарантия того, что если вы поменяете кнопку в «Футере», у вас случайно не улетит кнопка в «Шапке». Это изоляция стилей.

2. Client-First — Стандарт индустрии Webflow

Агентство Finsweet адаптировало логику БЭМ специально для Webflow и назвало её Client-First. Сейчас это самая популярная система в мире.

Ее главная фишка — понятность для не-программистов (клиентов).Вместо сложных сокращений используются понятные слова:

Вместо col-6 (как в коде) пишется padding-global.
Вместо h1-l пишется heading-style-h1.

Плюсы Client-First:

Масштабируемость: На этой системе можно строить гигантские порталы на 500 страниц.
«Автобусный фактор»: Если ваш разработчик пропадет, любой другой профи, знающий Client-First (а их тысячи), подхватит проект за 15 минут.
Порядок: Четкая структура папок и стилей.

Почему тогда некоторые пишут «No Client-First»?

Если система так хороша, почему есть ее противники?

1. «Див-суп» (Div Soup)

‍Client-First требует создавать много вложенных папок (div-блоков) для структуры. Для простой маркетинговой страницы это выглядит как стрельба из пушки по воробьям. Код становится тяжелее.

2. Сложность для новичка

‍Если ваш маркетолог захочет сам поменять отступ на сайте, сделанном по Client-First, он может испугаться списка классов padding-section-large + margin-bottom-medium. Ему проще потянуть за ползунок вручную. А система это запрещает.

3. Визуальный шум

‍Панель классов в Webflow становится перегруженной длинными названиями.

Поэтому для большинства маркетинговых и корпоративных сайтов актуальна золотая середина:
— Аккуратность и системность в названиях классов (стилей объектов), но в то же время краткость названий, для лучшей читаемости и компактности кода.
— Ремонтопригодность и технологичность стройки без избыточных элементов, и лишних вложенностей для удобства пользования палитрой иерархии объектов.

Вердикт: Что требовать в ТЗ?

Выбор зависит от масштаба вашего бизнеса.

Вам НУЖЕН Client-First (или строгий БЭМ), если:

Вы строите сайт «на вырост» (планируете добавлять новые услуги, блог, разделы).
С сайтом будут работать разные подрядчики.
Вам важна предсказуемость и чистота кода.

Вам НЕ НУЖЕН Client-First, если:

Это простой одностраничник (лендинг) для теста гипотезы, который через месяц, возможно, удалят.
Сайт делает один дизайнер-фрилансер, и никто кроме него туда лезть не будет.
Вы хотите максимальную креативную свободу. Awwwards-style сайты с безумной анимацией часто нарушают все правила сетки.

Резюме

Требование «Client-First» в вакансии — это фильтр качества. Оно отсеивает новичков, которые вчера открыли Webflow, и привлекает системных инженеров. Для серьезного B2B-проекта наличие системы — это не опция, а страховка ваших инвестиций в разработку. Но использовать подход следует обоснованно.

Все статьи