БЭМ-одержимость. Последствие параметрического дизайна

    Тысячи часов были инвестированы мной вхолостую. Если верить правилу 10 000 часов, то еще немного и я смог бы стать сносным скрипачом, ремесленником, спортсменом или еще кем-то. Но в разработке и дизайне это не работает. Весь шлак удаляется и часы обнуляются. А число ошибок и скорость изменения настолько велика, что мысли о приобретенном опыте можно отбросить.

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

    Мне, как дизайнеру, не хочется тратить 90% времени на формирование окружения (структуру, сборщики и другие подобные вещи). А писать HTML и CSS по старинке, я позволить себе не могу. Таким образом, появляется необходимость в среде для «умного» дизайна.

    Анти-кастомщина


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


    Все начало меняться, когда на одном из @cssunderhood, появился Виталий Харисов. Своими твитами он все сильней давил на те зудящие проблемы, имеющиеся в текущем процессе. И к концу недели я был совершенно обескуражен и не видел причин не попробовать БЭМ более основательно.

    БЭМ как методология или что-то большее


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

    БЭМ-больше чем просто методология


    Вся проблема в том, что вы пытаетесь писать результирующий код. Но все резко меняется, когда вы ставите project-stub и пробуете описать ваш интерфейс на BEMJSON. Я бы сказал, что это своего рода точка невозврата — когда мышление, восприятие интерфейса, его конструкций и способ реализации, меняется бесповоротно. Вот для примера карта коммитов на github-е. Тут можно увидеть тот момент, когда я познакомился с project-stub
    image

    Bem-components


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

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

    Распотрошил bem-components


    1. Мой старт начинался с прототипирования на BEMJSON, c использованием bem-components. Для прототипов нужно было составить небольшие гайды. Так как я прошерстил несколько Яндексовых сервисов, у меня уже сложилось общее понимание, как устроен их UI, хотя общего между сервисами, за исключением веб компонентов, было не так уж и много. Я раздробил каждый сервис по нескольким составляющим: типографика, цвета, отступы, размеры контролов, конструкции и т.д. Найдя закономерности, опираясь на накопленный опыт в формировании живых стаил гайдов, я составил вот такой гайд для прототипов + заиспользовал bem-grid для конструкций каркаса страниц.
    2. Второй глобальной задачей для меня было внести кастомность. Чтоб формировать проектный UI на базе сверстанного прототипа. И я начал с цветов. Оптимизировал bem-components, для удобной кастомизации их цветов.
      1. Вытащил все цвета, которые были в файлах common.blocks/компонент/_theme/компонент_theme_island.styl. Получился 31 цвет (вместе с оттенками, прозрачностями и тд).
      2. Привел все к hsla, чтоб были наглядно видно основные цвета.
      3. Разбил цвета(оттенки) на группы, по основным цветам.
      4. Вытащил в переменные основные цвета:
        • $base = #000
        • $active = #070
        • $link = #44b
        • $project = #fc0
        • $alert = #e00
        • $normal = #f6f5f3

      5. Задал hue, saturation, lightness, opacity через Stylus.
      6. Создал файлик design/colors.styl и импортировал его в стили компонентов.
      7. Процесс оптимизации — codepen.io/koloskof/full/gaNGgB

      Что получилось — github.com/bemdesign/bemdesign-components/tree/cosmetic.

      Это было хорошее начало, но хотелось более гибкой настройки.
    3. Проанализировал все параметры, которые нужно менять при формировании своей «темы», в соответствии со стилем проекта. Таким образом, их получилось 200 штук. Все они были вынесены в отдельный файл. Многие из них были неочевидны, так как отражали особенность конструкций БЭМ компонентов. Поэтому рядом с каждой переменной указано, что она меняет (сейчас процесс оптимизации продолжается)
    4. Когда у вас есть большинство зависимостей для того, чтоб заниматься «Параметрическим дизайном», трудно остановиться. И захотелось сфокусироваться на типографике. По статистике Джефри Зельдмана, 90% составляющих интерфейса это типографика. И она заслуживала отдельного внимания, поэтому ее я вынес в отдельный компонент, с несколькими группами модификаторов. Что позволяет гибко, но достаточно дисциплинированно использовать ее в компонентах. (Пару значений размеров пересекаются с компонентами, на это стоит обратить внимание при кастомизации)
    5. Стартонул базовый Kit, импортировав в блоки переменные отступов и цветов. Это сыроватый набросок открытого прототипа Kit-а с которым я буду довольно много экспериментировать, дошлифовывая БЭМ для своих дизайнерских нужд.


    Самая ценная дизайнерская инвестиция


    Хотя я проникся только начальной часть этой большой методологии, БЭМ стал для меня самой ценной дизайнерской инвестицией. Зная свою «симпатию» к «Дизайну в Браузере», могу сказать, что БЭМ делает его логичным, мощнейшим и самым естественным способом реализации качественного UI-я.

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

    Stay BEMed!
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 0

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

    Самое читаемое