{"id":30145328,"url":"https://github.com/grawl/bem-design-medium","last_synced_at":"2026-02-09T06:04:29.497Z","repository":{"id":141662653,"uuid":"50265283","full_name":"Grawl/bem-design-medium","owner":"Grawl","description":null,"archived":false,"fork":false,"pushed_at":"2016-01-24T00:37:07.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-15T14:20:30.125Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Grawl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-24T00:22:59.000Z","updated_at":"2016-11-19T22:04:52.000Z","dependencies_parsed_at":"2023-04-19T13:17:29.266Z","dependency_job_id":null,"html_url":"https://github.com/Grawl/bem-design-medium","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Grawl/bem-design-medium","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fbem-design-medium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fbem-design-medium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fbem-design-medium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fbem-design-medium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Grawl","download_url":"https://codeload.github.com/Grawl/bem-design-medium/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fbem-design-medium/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269850366,"owners_count":24485177,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-11T08:12:23.399Z","updated_at":"2026-02-09T06:04:26.104Z","avatar_url":"https://github.com/Grawl.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# БЭМ одержимость. Последствие параметрического дизайна\n\n***Тысячи часов было инвестировано мной вхолостую. Если верить правилу 10 000 часов, то еще не много и я мог бы стать сносным скрипачем, ремесленником, спортсменом или еще кем-то. Но в разработке и дизайне это не работает. Весь шлак удаляется и часы обнуляются. А число ошибок и скорость изменения настолько велика, что мысли о приобретенном опыте можно отбросить.***\n\nПорог входа в формирование экосистемы для своего проекта или семейства проектов не должен быть таким сумасшедшим и к нему не надо относиться как глобальному наследию. Нужна система, использующая коллективный опыт, позволяющая массово себя улучшать, при этом модифицирую точечно под себя.\n\nМне, как дизайнеру, не хочется тратить 90% времени на формирование окружения (структуру, сборщики и другие подобные вещи). А писать HTML и CSS по старинке, я позволить себе не могу. Таким образом, появляется необходимость в среде для «умного» дизайна.\n\n## Анти-кастомщина\nКакое-то время я был горд проделанной работой. То, тем как поменялись процессы в нашей команде, как мы выходили из полного дизайн хаоса. Я описывал это в статье «Дизайн масштабируемых проектов». Но меня беспокоило несколько моментов. И ощущение того, что мы написали свою кастомщину (хоть и достойно справляющуюся со своими задачами) все чаще напрягало.\n\nВсе начало меняться, когда на одном из @cssunderhood, появился Виталий Харисов. Своими твитами он все сильней давил на те зудящие проблемы, имеющиеся в текущем процессе. И к концу недели я был совершенно обескуражен и не видел причин не попробовать БЭМ более основательно.\n\n## БЭМ как методология или что-то большее\nК методологии БЭМ я пришел прогрессивным путем через МCSS. И вопрос об ее использовании, уже не стоял. Но «Дизайн в браузере» и так жутко пугающая вещь для многих дизайнеров, а реализация его по БЭМ методологии ручными способами просто обескураживает.\n\n## БЭМ больше чем просто методология\nВся проблема в том, что вы пытаетесь писать результирующий код. Но все резко меняется, когда вы ставите project-stub, пробуете описать ваш интерфейс на BEMJSON. Я бы сказал, что это своего рода точка невозврата, когда мышление, восприятие интерфейса, его конструкций и способ реализации, меняется бесповоротно. Вот для примера карта коммитов на githab-е. Тут можно увидеть тот момент, когда я познакомился с project-stub\n\n## Bem-components\nБЭМ компоненты были одной из основных причин, чтоб начать использовать БЭМ. Они были идеальны для прототипирования. Хотя и конструкции компонентов, мягко говоря, не предсказуемые. Я думаю об этом можно догадаться по докладам из жанра — «Как сверстать кнопку». Но именно эти конструкции перекрывали все спорные моменты, с которыми раньше приходилось мириться или решать костылями.\n\nДля меня была важна закономерность параметров. Зная, склонность к порядку БЭМ команды, я рассчитывал найти закономерность в Яндексовских интерфейсах. Посмотрев большинство Яндекс сервисов, я обнаружил большую разношерстность, не смотря на внешнее сходство всех проектов. И я решил, заточить дизайн среду под себя.\nРаспотрошил bem-components\n\n### Шаг 1\nМой старт начинался с прототипирования на BEMJSON, c использованием bem-components. Для прототипов нужно было составить небольшие гайды. Так как я прошерстил несколько Яндексовых сервисов, у меня уже сложилось общее понимание, как устроен их UI, хотя общего между сервисами, за исключением веб компонентов, было не так уж и много. Я раздробил каждый сервис по нескольким составляющим: типографика, цвета, отступы, размеры контролов, конструкции и т.д. Найдя закономерности, опираясь на накопленный опыт в формировании живых стаил гайдов, я составил вот такой гайд для прототипов + заиспользовал bem-grid для конструкций каркаса страниц.\n\n### Шаг 2\nВторой глобальной задачей для меня было — внести кастомность. Чтоб формировать проектный UI на базе сверстанного прототипа. И я начал с цветов. Оптимизировал bem-components, для удобной кастомизации их цветов.\nВытащил все цвета, которые были в файлах common.blocks/компонент/_theme/компонент_theme_island.styl. Получился 31 цвет (вместе с оттенками, прозрачностями и тд).\nПривел все к hsla, чтоб были наглядно видно основные цвета.\nРазбил цвета(оттенки) на группы, по основным цветам.\nВытащил в переменные основные цвета:\n* $project = #fc0\n* $base = #000\n* $normal = #f6f5f3\n* $active = #070\n* $link = #44b\n* $alert = #e00\n\nЗадал hue, saturation, lightness, opacity через Stylus.\nСоздал файлик design/colors.styl и импортировал его в стили компонентов\n\nПроцесс оптимизации — codepen.io/koloskof/full/gaNGgB\n\nЧто получилось — github.com/bemdesign/bemdesign-components/tree/cosmetic\nЭто было хорошее начало, но хотелось более гибкой настройки.\n\n### Шаг 3\nПроанализировал все параметры, которые нужно менять при формировании своей «темы», в соответствии со стилем проекта. Таким образом, их получилось 200 штук. Все они были вынесены в отдельный файл. Многие из них были неочевидны, так как отражали особенность конструкций БЭМ компонентов. Поэтому рядом с каждой переменной указано, что она меняет (сейчас процесс оптимизации продолжается)\n\n### Шаг 4 \nКогда у вас есть большинство зависимостей для того, чтоб заниматься «Параметрическим дизайном», трудно остановиться. И захотелось сфокусироваться на типографике. По статистике Джефри Зельдмана, 90% составляющих интерфейса это типографика. И она заслуживала отдельного внимания, поэтому ее я вынес в отдельный компонент, с несколькими группами модификаторов. Что позволяет гибко, но достаточно дисциплинированно использовать ее в компонентах. (Пару значений размеров пересекаются с компонентами, на это стоит обратить внимание при кастомизации)\n\n### Шаг 5\nСтартонул базовый Kit, импортировав в блоки переменные отступов и цветов. Это сыроватый набросок открытого прототипа Kit-а с которым я буду довольно много экспериментировать, дошлифовывая БЭМ для своих дизайнерских нужд.\n\n## Самая ценная дизайнерская инвестиция\nХотя я проникся только начальной часть этой большой методологии, БЭМ стал для меня самой ценной дизайнерской инвестицией. Зная свою «симпатию» к «Дизайну в Браузере», могу сказать, что БЭМ делает его логичным, мощнейшим и самым естественным способом реализации качественного UI-я.\n\nP.S. Если вы не сделали первые шаги в БЭМ, как дизайнер, то у вас есть отличная возможность. Не стесняйтесь постучаться в БЭМ сообщество, которое довольно активное и в моменты ступора, направит вас в нужное направление.\n\nStay BEMed!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrawl%2Fbem-design-medium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrawl%2Fbem-design-medium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrawl%2Fbem-design-medium/lists"}