2 заметки с тегом

БЭМ

Атомарный дизайн и методология БЭМ

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

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

И вот, спустя некоторое время, Леша Сотов рассказал ребятам об этом подходе на языке разработчика

Спустя еще некоторе время одна из команд разработчиков принялась пилить компоненты, подглядывая в методологию Яндекса. Для этой задачки я написал небольшой гайд (где, в какой момент и как именно используются элементы) для библиотеки элементов под этот пилотный проект и подготовил стартовый КИТ 1.0.0
Некоторые элементы из него

До поэтапного переезда на Вуи.джи-эс и внедрения компонентов в Меркате переделана значительная часть юзабилити. Скоро я продолжу рассказывать про эти улучшения……

Untitled Document

Про БЭМ

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

Для начала разберемся с тем, что такое «Блок»

Типовая страница

На странице можно выделить несколько основных зоны.
Каждая из них обособлена и оформляется своей разметкой и стилем.

Типовая страница

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

дополнительный блок внутри

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

Для этого хорошо подходит техника «вёрстка независимыми блоками».

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

Нужен механизм:
• облегчающий сборку блоков;
• позволяющий перемещать элементы по странице;
• быстро собирать страницу из имеющихся компонентов;
• переиспользовать блоки в дочерних проектах.

Механизм независимых блоков использует минимум глобальных стилей, каждый обособленный элемент на странице описывается отдельным стилем. Эти стили дублируются и не обьединяются, а сами блоки могут вкладываться один в другой.
Для выполнения условий независимости используется «class» вместо «id»? каждый блок имеет префикс, а в таблице стилей нет классов вне блоков.

Опенсорс-платформа Яндекса → https://ru.bem.info/
Их библиотека 5.0 → https://ru.bem.info/platform/libs/bem-components/5.0.0/#supported-browsers

PS: В планах внедрить этот подход в Меркату.

2017   БЭМ   Мерката
Untitled Document