- PVSM.RU - https://www.pvsm.ru -
Тысячи часов было инвестировано мной вхолостую. Если верить правилу 10 000 часов, то еще не много и я мог бы стать сносным скрипачем, ремесленником, спортсменом или еще кем-то. Но в разработке и дизайне это не работает. Весь шлак удаляется и часы обнуляются. А число ошибок и скорость изменения настолько велика, что мысли о приобретенном опыте можно отбросить.
Порог входа в формирование экосистемы для своего проекта или семейства проектов не должен быть таким сумасшедшим и к нему не надо относиться как глобальному наследию. Нужна система, использующая коллективный опыт, позволяющая массово себя улучшать, при этом модифицирую точечно под себя.
Мне, как дизайнеру, не хочется тратить 90% времени на формирование окружения (структуру, сборщики и другие подобные вещи). А писать HTML и CSS по старинке, я позволить себе не могу. Таким образом, появляется необходимость в среде для «умного» дизайна.
Какое-то время я был горд проделанной работой. То, тем как поменялись процессы в нашей команде, как мы выходили из полного дизайн хаоса. Я описывал это в статье «Дизайн масштабируемых проектов» [1]. Но меня беспокоило несколько моментов. И ощущение того, что мы написали свою кастомщину (хоть и достойно справляющуюся со своими задачами) все чаще напрягало.
Все начало меняться, когда на одном из @cssunderhood [2], появился Виталий Харисов [3]. Своими твитами он все сильней давил на те зудящие проблемы, имеющиеся в текущем процессе. И к концу недели я был совершенно обескуражен и не видел причин не попробовать БЭМ более основательно.
К методологии БЭМ я пришел прогрессивным путем через МCSS [4]. И вопрос об ее использовании, уже не стоял. Но «Дизайн в браузере» [5] и так жутко пугающая вещь для многих дизайнеров, а реализация его по БЭМ методологии ручными способами просто обескураживает.
Вся проблема в том, что вы пытаетесь писать результирующий код. Но все резко меняется, когда вы ставите project-stub [6], пробуете описать ваш интерфейс на BEMJSON [7]. Я бы сказал, что это своего рода точка невозврата, когда
[9]
БЭМ компоненты были одной из основных причин, чтоб начать использовать БЭМ. Они были идеальны для прототипирования. Хотя и конструкции компонентов, мягко говоря, не предсказуемые. Я думаю об этом можно догадаться по докладам из жанра — «Как сверстать кнопку». Но именно эти конструкции перекрывали все спорные моменты, с которыми раньше приходилось мириться или решать костылями.
Для меня была важна закономерность параметров. Зная, склонность к порядку БЭМ команды, я рассчитывал найти закономерность в Яндексовских интерфейсах. Посмотрев большинство Яндекс сервисов, я обнаружил большую разношерстность, не смотря на внешнее сходство всех проектов. И я решил, заточить дизайн среду под себя.
Что получилось — github.com/bemcustom/bemcustom-components/tree/cosmetic [16]
Это было хорошее начало, но хотелось более гибкой настройки.
Хотя я проникся только начальной часть этой большой методологии, БЭМ стал для меня самой ценной дизайнерской инвестицией. Зная свою «симпатию» к «Дизайну в Браузере» [5], могу сказать, что БЭМ делает его логичным, мощнейшим и самым естественным способом реализации качественного UI-я.
P.S. Если вы не сделали первые шаги в БЭМ, как дизайнер, то у вас есть отличная возможность. Не стесняйтесь постучаться в БЭМ сообщество [22], которое довольно активное и в моменты ступора, направит вас в нужное направление.
Stay BEMed!
Автор: mkoloskov
Источник [23]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/108566
Ссылки в тексте:
[1] «Дизайн масштабируемых проектов»: http://bit.ly/1MZnGtd
[2] @cssunderhood: https://twitter.com/cssunderhood
[3] Виталий Харисов: https://twitter.com/harisov
[4] МCSS: https://operatino.github.io/MCSS/
[5] «Дизайн в браузере»: http://habrahabr.ru/post/238485/
[6] project-stub: https://github.com/bem/project-stub
[7] BEMJSON: https://ru.bem.info/technology/bemjson/v2/bemjson/
[8] мышление: http://www.braintools.ru
[9] Image: https://github.com/koloskof
[10] bem-components: https://ru.bem.info/libs/bem-components/v2.4.0/
[11] гайд: https://github.com/bemcustom/bemcustom-info/blob/master/styles.md
[12] bem-grid: https://github.com/bem-incubator/bem-grid
[13] Stylus: http://stylus-lang.com/
[14] design/colors.styl: https://github.com/bemcustom/bemcustom-components/blob/cosmetic/colors.styl
[15] codepen.io/koloskof/full/gaNGgB: http://codepen.io/koloskof/full/gaNGgB/
[16] github.com/bemcustom/bemcustom-components/tree/cosmetic: https://github.com/bemcustom/bemcustom-components/tree/cosmetic
[17] 200 штук: https://github.com/bemcustom/bemcustom-components/blob/custom/custom.styl
[18] «Параметрическим дизайном»: http://habrahabr.ru/post/274719/
[19] Джефри Зельдмана: http://www.zeldman.com/
[20] компонент: https://github.com/bemcustom/bemcustom-blocks/blob/master/common.blocks/text/text.styl
[21] Kit: https://github.com/bemcustom/bemcustom-blocks
[22] БЭМ сообщество: http://bem.info/forum
[23] Источник: http://habrahabr.ru/post/274721/
Нажмите здесь для печати.