Comments 37
Ах, вы ж мои зайки! Спасибо огромное! Я уже долгое время присматриваюсь к БЕМ, но собирать документацию по-кусочкам не было времени. А здесь все вместе! Однозначно, в избранное!
Странное впечатление оставляет текст. С одной стороны, вроде всего много, а с другой — смотришь в каждый раздел и думаешь: «а почему здесь именно это? почему тут не bemhtml, а bemjson? они взаимозаменяемы?».
Нет какой-то общей карты, что-ли, типа: «вот bem, у него есть следующие плюшки:
Всё как-то надёргано, разрознено, непонятно за что браться и с какой стороны подходить. Опять же, почему enb, а не bem-tools? Какие части bem можно безболезненно исключить из использования?
Как можно встроить БЭМ в текущий проект?
И картинки отвалились :(
Нет какой-то общей карты, что-ли, типа: «вот bem, у него есть следующие плюшки:
- bemjson — может то, то и то. Лучше использовать там-то
- bemhtml — ...
Всё как-то надёргано, разрознено, непонятно за что браться и с какой стороны подходить. Опять же, почему enb, а не bem-tools? Какие части bem можно безболезненно исключить из использования?
Как можно встроить БЭМ в текущий проект?
И картинки отвалились :(
Картинки поправил. Благодарю.
Кажется что все это в тексте есть.
- bemjson — это абстракция над DOM-деревом, описывает BEM-дерево. Позволяет уйти от использования html при описании интерфейса.
- bemhtml — это шаблонизатор, преобразует bemjson в html
Кажется что все это в тексте есть.
Вы технологию хорошо знаете, поэтому вам всё очевидно. Я много про БЭМ читал, и на оф. сайте, и на хабре, и в клубе яндекса, вроде. И с самого начала не хватало объяснений что это даёт рядовому разработчику.
Плюс видно, что подход строился грамотно, всё разбито на модули, всё слабосвязано, но документация, бррр.
Вот например, открываю про BEMJSON (https://ru.bem.info/technology/bemjson/v2/bemjson/). Пытаюсь понять, что вообще такое BEMJSON. Нет определения. Листаю ниже — опять нет. А, во, нашёл, в конце раздела «общие понятия». Почему оно спрятано? От кого? То же самое в разделе про BEMTREE. В BEMHTML определение вообще вынесено на страницу 2 уровня.
Плюс в документах с самого начала прописывается ограничение: «Предполагается что читатель знаком с БЭМ». Ну, если я читаю про БЭМ, наверное я с ним не знаком.
Было бы круто, если бы появилась какая-то вводная статья, которая просто рассказывает про то, что такое БЭМ, из чего он состоит (шаблонизаторы, определённая организация файловой системы, преобразование исходников (прогон через borshik и csso), сервер разработки, библиотека компонентов [надеюсь я ничего не забыл]), какие даёт преимущества и что позволяет достичь.
Плюс видно, что подход строился грамотно, всё разбито на модули, всё слабосвязано, но документация, бррр.
Вот например, открываю про BEMJSON (https://ru.bem.info/technology/bemjson/v2/bemjson/). Пытаюсь понять, что вообще такое BEMJSON. Нет определения. Листаю ниже — опять нет. А, во, нашёл, в конце раздела «общие понятия». Почему оно спрятано? От кого? То же самое в разделе про BEMTREE. В BEMHTML определение вообще вынесено на страницу 2 уровня.
Плюс в документах с самого начала прописывается ограничение: «Предполагается что читатель знаком с БЭМ». Ну, если я читаю про БЭМ, наверное я с ним не знаком.
Было бы круто, если бы появилась какая-то вводная статья, которая просто рассказывает про то, что такое БЭМ, из чего он состоит (шаблонизаторы, определённая организация файловой системы, преобразование исходников (прогон через borshik и csso), сервер разработки, библиотека компонентов [надеюсь я ничего не забыл]), какие даёт преимущества и что позволяет достичь.
Спасибо. Ваш комментарий обязательно учтем в подготовке будущих материалов. Пока что можем предложить чаще заглядывать на ru.bem.info, задавать вопросы на форуме — мы стараемся часто отвечать и все все разъяснять, подписаться на наш твиттер, если вам удобно читать новости в твиттере. Как только у нас выйдет что-то похожее, вы будете в курсе.
тоже также не мог ничего понять из документации, возвращался к ней много раз, пока не начал чего то пробовать сделать. понимаю приходило в процессе. теперь мне документация кажется понятной и логичной.
И мне было трудно в начале, постоянно обращался к документации. И сейчас продолжаю. С опытом стал лучше понимать процесс. Пробуйте. Если будут вопросы, пишите на ru.bem.info/forum. Мы постоянно его мониторим и обязательно ответим и поможем.
Очень ловкое вступление: BBC использует БЭМ! А сейчас мы вам расскажем как сделать сайт на полном БЭМ-стэке. Правда BBC использовала от БЭМа только именование классов и ни кусочка стэка. При всём уважении к автору, статье и БЭМу.
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
В то время как все это начиналось у нас, кажется у всех небольших компаний была такая же ситуация — с отсутствием всего хорошего в разработке. В докладе я старался упоминать года, что бы был какой то тайм лайн.
Сейчас конечно все по другому. Модульный подход сегодня прослеживается во всем и уже считается нормой. Но, по моему опыту и судя по проблемам которые мне описывают люди желающие перейти на БЭМ стек, его отличает от всего, как минимум, очень гибкий и крутой шаблонизатор, который реально позволяет максимально реиспользовать код блока, на множестве проектов. Как максимум — на самом деле в БЭМ стеке целый набор всего с помощью чего кажется можно сделать все. Я не могу подобрать слова что бы оправдать «максимально реиспользовать», но в докладе был описан опыт использования другого шаблонизатора и те проблемы с которыми мы столкнулись. Я уверен что у большинства небольших компаний/веб студий у которых есть хоть какой то поток производства схожих продуктов, есть эти проблемы. Может быть аналогией крутости будет, что-то типа «блок написаный в БЭМ стеке — это как Bower пакет, только включающий в себя все технологии нужные в реализации этого блока. Причем блок можно легко переопределять/дописать не меняя базовый код». %) (Надеюсь мою аналогию ребята из яндекса поправлять или дополнят). Вот в наших процессах так же легко реиспользовать код другими подходами не получалось.
Ну про «декларативность, все написано в едином стиле, код легко передавать другим разработчикам и тд.» уже все наслышаны я думаю :).
Просто начни рассуждать как может изменяться/трансформироваться твой UI элемент если ты его захочешь реиспользовать на разных частях сайта или разных проектах.
Сейчас конечно все по другому. Модульный подход сегодня прослеживается во всем и уже считается нормой. Но, по моему опыту и судя по проблемам которые мне описывают люди желающие перейти на БЭМ стек, его отличает от всего, как минимум, очень гибкий и крутой шаблонизатор, который реально позволяет максимально реиспользовать код блока, на множестве проектов. Как максимум — на самом деле в БЭМ стеке целый набор всего с помощью чего кажется можно сделать все. Я не могу подобрать слова что бы оправдать «максимально реиспользовать», но в докладе был описан опыт использования другого шаблонизатора и те проблемы с которыми мы столкнулись. Я уверен что у большинства небольших компаний/веб студий у которых есть хоть какой то поток производства схожих продуктов, есть эти проблемы. Может быть аналогией крутости будет, что-то типа «блок написаный в БЭМ стеке — это как Bower пакет, только включающий в себя все технологии нужные в реализации этого блока. Причем блок можно легко переопределять/дописать не меняя базовый код». %) (Надеюсь мою аналогию ребята из яндекса поправлять или дополнят). Вот в наших процессах так же легко реиспользовать код другими подходами не получалось.
Ну про «декларативность, все написано в едином стиле, код легко передавать другим разработчикам и тд.» уже все наслышаны я думаю :).
Просто начни рассуждать как может изменяться/трансформироваться твой UI элемент если ты его захочешь реиспользовать на разных частях сайта или разных проектах.
UFO just landed and posted this here
Конечно окупятся. Как в любое другое про методологию, стандартизацию и тд. В любом случае в ваше коде есть компоненты которые хочется реиспользовать. Взять хотя бы bem-components, это же все нужно на любом сайте. Можно еще придумать что же общего в продуктах что вы делаете — меню, пагинатор, слайдеры, соц виджеты тоже можно представить как блок для этого есть даже либа, css сетка (причем она с js функциональностью), редактор текста можно завернуть блок и удобно подключать на проект, можно завернуть Яндекс карты в блок сделать тебе удобные методы для работы с ними, или есть у тебя в препроцессор css используется какие нибудь функции для easing’гов — можно написать и для этого блок. Причем если представить это все как библиотеку блоков которая будет подключаться к новому проекту — в сборку попадает только то что нужно. А на уровне нового проекта совсем не нужно писать код заново, ну может только стили css поправить.
Ну и даже в команде из 5 сотрудников есть тянучка кадров, я думаю команде и начальству понравится что старый код с приходом нового сотрудника будет не забыт. Методология проста и сейчас всем понятно зачем это все нужно.
Ну и даже в команде из 5 сотрудников есть тянучка кадров, я думаю команде и начальству понравится что старый код с приходом нового сотрудника будет не забыт. Методология проста и сейчас всем понятно зачем это все нужно.
И я всегда, когда рассказываю про плюсы, забываю рассказать о том что идет очень много всего «из коробки» вместе со стеком БЭМ, очень нужные вещи в любом процессе — минификации css/js, автопрефиксер, фриз статики… В общем все это описано в небольшом конфиге. Этот конфиг, практически без изменений, у нас используетя во всех проектах — от лендингов до больших сервисов.
И ещё, в вдогонку. Напишите, если есть возможность, как интегрировать БЭМ в уже существующий проект? Насколько я понимаю, в Яндексе это уже проходили.
Просто есть много проектов, которые разрабатываются уже N месяцев/лет и на которых можно поэкспериментировать, потихоньку, аккуратно переводя их на новую технологию и смотря её применимость. А разрабатывать проект с 0 на том, в чём ты не особо понимаешь рискованно. Можно и сроки сорвать и репутацию испортить.
Или БЭМ подходит только если весь проект на нём?
Просто есть много проектов, которые разрабатываются уже N месяцев/лет и на которых можно поэкспериментировать, потихоньку, аккуратно переводя их на новую технологию и смотря её применимость. А разрабатывать проект с 0 на том, в чём ты не особо понимаешь рискованно. Можно и сроки сорвать и репутацию испортить.
Или БЭМ подходит только если весь проект на нём?
Я бы порекомендовал сгенерировать себе проект, с помощью generator-bem-stub и начать его использовать в качестве станка для вёрстки и быстрого прототипирования. Начать с bemjson и css, постепенно привыкнуть к i-bem и шаблонизаторам. Это не требует внесения изменения ваших проектов. Со временем вы сами поймёте, что и на сколько применимо в вашем случае.
Зачем вводить в проект еще один шаблонизатор?
Имеет смысл писать с нуля, лапша не нужна.
Имеет смысл писать с нуля, лапша не нужна.
Для начала весь текущий код можно положить в один большой блок
БЭМ — это методология, предлагающая пользоваться независимыми компонентами. Не обязательно пользоваться инструментами, чтобы использовать БЭМ. Если у вас интерфейс разбит на независимые блоки — это уже БЭМ.
page, а новые писать отдельно по блокам. Затем, для безболезненной интеграции, я бы начал весь CSS код разносить по блокам (по отдельным папочкам на файловой системе). Для сборки взял бы любой удобный сборщик (gulp, grunt, enb). Тоже самое с JS-кодом. БЭМ — это методология, предлагающая пользоваться независимыми компонентами. Не обязательно пользоваться инструментами, чтобы использовать БЭМ. Если у вас интерфейс разбит на независимые блоки — это уже БЭМ.
Я безнадежно отстал от жизни и до сих пор верстаю на чистом HTML…
Несколько попыток приобщиться к БЭМу не увенчались успехом. Не могу принять его за избыточность и из за конфликта с самим собой. Теория завораживает, практика раздражает.
А что за шрифт на скриншоте?
Похоже на Input Mono
Сделал все в точности как в примерах, а вместо json отдается пустой массив. Что могло пойти не так? В консольной версии json прекрасно отдается.
Рассмотрел внимательнее сайт ya.ru. а так же обратился к сайту ru.bem.info. Может ли автор уточнить несколько вопросов касательно верстки по БЭМу на примере собственного сайта ya.ru?
Например, 30% стилей содержат вложенные классы, далее цитата БЭМ «Методология БЭМ допускает использование таких селекторов, но рекомендует по-максимуму его сократить.». Скажите пожалуйста, какая НЕОБХОДИМОСТЬ была использовать так часто вложенные селекторы на довольно простой странице?
Например:
Далее, присуствуют элементы, стили которых описаны через аттрибут style:
Как вы можете объснить подобные вещи в собственной верстке НЕ ПО БЕМу?
И наконец, вопрос «Можно ли объединять тег и класс в селекторе? Например, button.button», никакого конкретного ответа на сайте ru.bem.info нет, но при этом на сайте ya.ru теги используются для описания стилей:
Знаете, после анализа стилей верстки автора БЭМа невольно задаешься вопросами, а использует ли сам автор верстку по БЭМу? и если это и есть верстка по БЭМу, то чем она отличается от верстки не по БЭМу?
Например, 30% стилей содержат вложенные классы, далее цитата БЭМ «Методология БЭМ допускает использование таких селекторов, но рекомендует по-максимуму его сократить.». Скажите пожалуйста, какая НЕОБХОДИМОСТЬ была использовать так часто вложенные селекторы на довольно простой странице?
Например:
:link, .b-widget__title *:visited, .link:visited, .link__search:visited {
text-decoration: none;
}
.i-ua_interaction_yes[data-interaction=«pointer»] .link, .i-ua_interaction_yes[data-interaction=«pointer»] .link:focus {
outline: medium none;
}
:link, .b-widget__title *:visited, .link:visited, .link__search:visited {
color: #0d44a0;
}
Далее, присуствуют элементы, стили которых описаны через аттрибут style:
Как вы можете объснить подобные вещи в собственной верстке НЕ ПО БЕМу?
И наконец, вопрос «Можно ли объединять тег и класс в селекторе? Например, button.button», никакого конкретного ответа на сайте ru.bem.info нет, но при этом на сайте ya.ru теги используются для описания стилей:
a.button:link, a.button:visited, a.button:hover {
text-decoration: none;
}
.dump pre {
background-color: rgba(255, 255, 255, 0.8);
border-top: 3px solid rgba(0, 0, 0, 0.2);
font-family: «Monaco»,«Andale Mono»,«Lucida Console»,«Bitstream Vera Sans Mono»,«Courier New»,Courier,monospace;
line-height: 1.5;
padding: 10px;
}
wbr {
display: inline-block;
}
Знаете, после анализа стилей верстки автора БЭМа невольно задаешься вопросами, а использует ли сам автор верстку по БЭМу? и если это и есть верстка по БЭМу, то чем она отличается от верстки не по БЭМу?
Тот факт, что БЭМ изобрели в Яндексе не гарантирует, что все разработчики в любой момент времени используют его в полной мере.
Причин может быть много. Например, разработчик недавно вышел на работу и еще не разобрался. Или проект старый, но работает и переписывать его просто из любви к искусству не хватает рук. И так далее.
Если же смотреть конкретно на приведенные примеры, то предположу, что причины такие (дисклеймер: я являются разработчиком ya.ru и могу ошибаться по всем пунктам):
Проект использует общую библиотеку блоков (со свойственным всем долгоживущим общим решениям количеством legacy), но оформление ссылок на ya.ru отличаются от их оформления на остальном портале. Здесь разработчики просто повышают вес селекторов.
Выглядит как стили для оформления отладочной информации, используемой в девелопменте. Думаю, странно предъявлять к ним какие-либо требования (другой вопрос, что если я прав на счет их предназначения, то их бы в идеале вообще вырезать при сборке в прод).
В целом же ya.ru следует БЭМ-методологии гораздо ближе, чем ряд других сервисов Яндекса. Однако это обычное дело: все знают, что долго сидеть за компьютером и кушать жареное вредно, а заниматься спортом — полезно, но далеко не всегда следуют хорошим рекомендациям ;)
Причин может быть много. Например, разработчик недавно вышел на работу и еще не разобрался. Или проект старый, но работает и переписывать его просто из любви к искусству не хватает рук. И так далее.
Если же смотреть конкретно на приведенные примеры, то предположу, что причины такие (дисклеймер: я являются разработчиком ya.ru и могу ошибаться по всем пунктам):
a.button:link, a.button:visited, a.button:hover {
text-decoration: none;
}
Проект использует общую библиотеку блоков (со свойственным всем долгоживущим общим решениям количеством legacy), но оформление ссылок на ya.ru отличаются от их оформления на остальном портале. Здесь разработчики просто повышают вес селекторов.
.dump pre {
background-color: rgba(255, 255, 255, 0.8);
border-top: 3px solid rgba(0, 0, 0, 0.2);
font-family: «Monaco»,«Andale Mono»,«Lucida Console»,«Bitstream Vera Sans Mono»,«Courier New»,Courier,monospace;
line-height: 1.5;
padding: 10px;
}
wbr {
display: inline-block;
}
Выглядит как стили для оформления отладочной информации, используемой в девелопменте. Думаю, странно предъявлять к ним какие-либо требования (другой вопрос, что если я прав на счет их предназначения, то их бы в идеале вообще вырезать при сборке в прод).
В целом же ya.ru следует БЭМ-методологии гораздо ближе, чем ряд других сервисов Яндекса. Однако это обычное дело: все знают, что долго сидеть за компьютером и кушать жареное вредно, а заниматься спортом — полезно, но далеко не всегда следуют хорошим рекомендациям ;)
Sign up to leave a comment.
Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса