Попробуй БЭМ на вкус!

[anyxem]

Чем больше читаю о БЭМ, тем больше вопросов.

[toivonen]

Задавайте!

[dumistoklus]

Как развернуть под Windows?

[toivonen]

Я не пользователь Windows, но я попросила кого надо, чтобы вам ответили. Только подождите немного :-)

[RedShark]

Расскажите пожалуйста, как удобно работать с бэм в проектах на php

[toivonen]

На YaC2011 был мастер-класс «Тема для Wordpress на БЭМ» clubs.ya.ru/bem/replies.xml?item_no=1151 Там как раз про PHP. Только это контент годовой давности, сейчас уже не нужно 100500 комманд для сборки в консоли писать, потому что есть bem server. Но по видео можно принцип понять.

[dezconnect]

У меня один: нафига это все нужно? О_О Поясните, кто может сказать о преимуществах?

[toivonen]

Можете почитать ответы на комменты в Smashing Magazine coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/ Тема больно новая, поэтому там много вопросов. Но ответы все есть.
Также, видео, на которое я вначале давала ссылку, мне кажется, хорошо всё объясняет ( vimeo.com/53219242 ). Там по-английски, но зато это самый свежий контент.
А ещё есть доклад Виталия Харисова «История создания БЭМ» ( events.yandex.ru/talks/137/ ), на русском. Там как раз шаг ша загом про то, какие были проблемы в разработке, как их решали, добавляя в систему «правила», и как в итоге получился БЭМ.

[vithar]

Этот же доклад можно почитать текстом на ru.bem.info/method/history/

[dezconnect]

Не надо меня засылать в гугл или еще куда-то. Своими словами объясните зачем это ?!

[alexbaum]

В «Истории создания БЭМ» Виталя Харисов и объясняет своими словами. Коротко о главном: работа по БЭМ, это не верстка и прикручивание js, а разработка интерфейса, то есть вы начинаете мыслить другими порядками, блоками-элементами-модификаторами и их взаимодействиями, а не «класс у divа поменялся, отвалися мой js». Блок тут получается на более высоком уровне, чем верстка.

[PiSaiK]

По мне БЭМ хорош именно в верстке. Я конечно не использую такой механизм при создании сайтов. Но все чаще и чаще обращаюсь к методологии написания классов. Сразу снимается ряд проблем, особенно при наследовании. Порою даже код CSS короче.

[asavin]

Почему «конечно не использую»? Почему только в верстке?

[leMar]

БЭМ хорош только для проектов которые вы будете долго поддерживать. Год и дольше. Причем именно работать над ним, а не раз в месяц, что-то подправить. Для производства стайтов на продажу, это не очень подходит. Представьте что вам прислали на отладку главную страницу яндекса.

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

[kolyuchii]

Золотые слова!

Большинству разработчиков следует понять, что основа БЭМ — независимые блоки, а не префикс b_.

[asavin]

Тогда, если на проекте используется XSLT, то стоит сначала просто сверстать, а потом переводить в XSLT? Я вас не понимаю.

[toivonen]

«Сперва верстать» — это лишь вопрос привычки. Я бы даже такую страницу верстала, а потом переносила в шаблоны оооочень долго. А на bemjson+bemhtml бац-бац и всё готово. И сразу можно блоки реиспользовать и проект делить, как угодно. Например, блок «box» сначала в проекте был, и только при подготовке статьи я его в отдельную библиотеку выделила простым копированием.

[toivonen]

«У нас» нет цели разработать миллион библиотек. Мы даём другим инструмент, при помощи которого они могут разработать свои библиотеки и делиться друг с другом.

[asavin]

Почему вы сравниваете БЭМ и бутстрап?

[asavin]

Как насчет легкости поддержки и внесения изменений? Реализации удивительных идей удивительных менеджеров? Организации командной работы?

[asavin]

Я вас понял. Возможно, я просто давно не делал таких проектов.

[VBKesha]

Как раз сегодня решил разобраться в этом БЭМ, статья очень кстати. Спасибо!

[dasty]

Вы работаете на retina-экране? Что-то уж шрифты в скриншотах слишком большие.

[toivonen]

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

[lkart]

На сколько мне известно, за рубежом БЭМ особо не пользуются. В чем же дело? Западные разработчики используют какие-то свои решения? Или они еще не распробовали БЭМ? Или с БЭМ что-то не так?
Я смотрю на все это и искренне не могу понять как это может упрощать разработку и делать ее более эффективной, но я еще новичок и опыта работы над серьезными проектами нет, поэтому могу ошибаться.

[toivonen]

Про БЭМ на английском языке была одна статья и один доклад. Причём доклад был месяц назад.
Но несмотря на на такое откровенное мизерное количество информации, есть проекты, использующие БЭМ.
Навскидку — SoundCloud soundcloud.com, intuit.css inuitcss.com. Про последний есть даже статья с объяснениями webdesign.tutsplus.com/tutorials/htmlcss-tutorials/rubbing-noses-with-inuit-css/

[BekoBou]

Побольше таких статей step-by-step, чтобы было понятно что и откуда берётся.

[GreatRash]

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

[toivonen]

А можешь написать инструкцию с картинками?

[partisan]

Ребята, а в чём суть библиотеки bemhtml?

[toivonen]

Эта библиотека содержит шаблонизатор BEMHTML. Вот тут много буков про то, что это такое github.com/bem/bemhtml/blob/master/common.docs/reference/reference.ru.md

[moscow_beast]

в статье нет особенных подробностей

Тем не менее стало намного понятнее.

[gigigi]

К сожалению так и не смог установить bemtools, при инсталле ругается на всякие encodegen, coverjs и т.д.
node -v v0.6.19
npm -v 1.1.4
Последние из репозиториев.

[toivonen]

Можете код установки в gist положить и ссылку дать?

[gigigi]

Отправил в личку

[stakost]

Если что
$ node -v
v0.8.16

[keltanas]

Нравится БЭМ как философия. Но, по сути примерно то же самое стараются применять и другие фреймворки.
Только не совсем понятно, зачем для разметки использовать json? Ведь html для этих целей не просто так зародился.
Ну или yaml — от скобочек глаза резать не будет.

Если идти дальше, то на мой взгляд, dojo предостовляет не сколько не худший вариант блочно-модульной архиетктуры. Только там шаблоны сверстаны на html, на не на json, и ничего не надо компилировать, чтобы отобразить страницу.

Серверные фреймворки так же предлагают сборку страниц из блоков, а также удовлетворяют для этих блоков зависимости для js, css и image (возьмем хоть тот же symfony2 для php, или yii).

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

На конец остался вопрос: «Как, например, из базы данных, выводить контент на собранные БЭМом страницы?». Нигде пока этого так и не увидел (может плохо смотрел).

[toivonen]

YAML или что-то подобное у нас в планах.
Ответ на ваш последний вопрос есть в этих видео: clubs.ya.ru/bem/replies.xml?item_no=1359

[funca]

> Только не совсем понятно, зачем для разметки использовать json? Ведь html для этих целей не просто так зародился.

в данном случае, html является не исходником, а результатом компиляции. поэтому, использовать html было бы не логично (на эти грабли постоянно наступают — см. ru.wikipedia.org/wiki/Самореференция) — для описания исходной структуры нужно использовать мета-язык. мне кажется, что json это какой-то панк, но принципиальной разницы в альтернативах нет.

[alexbaum]

bemjson содержит струкртуру страницы (более высокую абстракцию), которая путем работы шаблонизатора превращается в разметку html/css/js. Можно сравнить с электрической схемой — тут блок резистор, тут блок транзистор, а тут — микросхема ввода. Детали реализации (готовую плату) уже монтажник создает (в случае веб-страниц bemhtml)

[philpirj]

Попробовать на вкус? Простите, но запаха вполне достаточно.

[alexios]

Объясните пожалуйста, в чём фишка такого подхода:

content: [
    {
        block: '...',
        content: {
            block: '...',
            content: [
                {
                    elem: '...',
                    content: '...'
                },
                {
                    elem: '...',
                    content: '...'
                }
            ]
        }
    }
]

Для двух блоков я написал четыре раза elem и пять раз content. Если это действительно так надо делать, то как это как это обойти/автоматизировать?
Да и вообще, если посмотреть, то всё как-то избыточно. Объясните, в чём подвох?

[toivonen]

Там всё одинаковое? Можно цикл написать, это обычный JavaScript.

[toivonen]

А, если вы про глубокую вложенность, то такой уж JSON. В XML что-то выглядит лучше, но там свои недостатки.
Надо попробовать YAML или что-то подобное, должно быть лучше.

[alexios]

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

[autobusiness]

ввел в поиск бэм, выдало bem.by/

[alekam]

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

[quwiero]

На этапе создания контейнера b-page__body-i я что-то завис. Будто бы не видит сервер мой b-page.bemhtml, при этом css в этой же директории подцепляется. Есть идеи, что не так?

[toivonen]

Не думаю, что b-page.bemhtml не подцепляется, ведь до этого b-page__body у вас выводился? Могу подебажить, если на гитхаб куда-нибудь свои результаты зальёте.

[quwiero]

О, спасибо! Заливать всю директорию проекта?

[quwiero]

Да, с b-page__body все ок, но он приходит из bem-bl/blocks-desktop. Я подумал, может дело в каких-то зависимостях, которых я не вижу

[quwiero]

github.com/boronchiev/my-pretty

[toivonen]

Сразу разобраться не получилось, но дело не в зависимостях — всё подключается. Похоже, что недавно переписали блок b-page и возможен баг. Я когда разберусь, напишу комментарий.

[toivonen]

У вас файл с расширением «bemthml», а не «bemhtml». Переименуйте, и всё заработает.

[quwiero]

:) Спасибо!

[Alur]

Делаю всё по инструкции.

При запуске bem server и последующем запросе страницы localhost:8080/desktop.bundles/index/index.html получаю:

HTTP error 500

Error: Command failed: fatal: unable to connect to github.com:
github.com[0: 192.30.252.128]: errno=No error


    at ChildProcess.exithandler (child_process.js:637:15)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:735:16)
    at Process.ChildProcess._handle.onexit (child_process.js:802:5)

Как быть в данной ситуации?

P.S.: я нахожусь за прокси. Хотя мне всё равно не понятно, откуда берутся попытки залезть на github.com.

[asavin]

Хотя мне всё равно не понятно, откуда берутся попытки залезть на github.com.

Судя по статье, используется bem-bl, а репозиторий этой библиотеки — на github.com.

[Renius]

Библиотеки подтягиваются после старта сервера?

[veged]

да, библиотеки выкачиваются по необходимости уже во время работы сервера

[Renius]

А как Вы тогда профилируете?

[veged]

не понял вопроса… если речь о профилировании работы сервера, то мы замеряем время сборки без учёта сетевых расходов

[Renius]

Если у вас по необходимости библиотека не подтянулась, вы об этом вообще узнаете?

[veged]

конечно — будет ошибка сборки, например как в исходном коментарии, когда из-за отсутствия соединения с github.com не скачалось что-то

[Renius]

Т.е. у нас сервер работает-работает, и внизапно, бац: ошибка сборки?

[toivonen]

А можете прямо написать, к чему вы пытаетесь подвести? С наводящими вопросами, боюсъ, будет очень долго. Например не понятно «внезапно». Почему «внезапно»? Вы думаете, что этот сервер в продакшене работает?

[Renius]

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

[toivonen]

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

[Renius]

Вона чо, теперь ясно

[toivonen]

На вашем компьютере запустился bem server — инструмент для разработки, который будет автоматически пересобирать ваш проект, если вы внесете в него изменения.

[asavin]

Это dev-сервер, который нужен только разработчику. В случае ошибки сборки он даже не начнет работу.

[Alur]

Решил данный вопрос следующим образом:

Оказалось, что проблема возникает, когда происходит попытка загрузить библиотеку с адреса:

git://необходимая_библиотека

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

git://необходимая_библиотека

на ссылки вида:

http://необходимая_библиотека

После этого всё заработало.

P.S.: Вероятно, прокси не понимает, что это за экзотический такой транспорт — git://.

[KenAdams]

Шикарно! Спасибо за решение, сидел тоже за прокси, не мог понять почему не качает либы :-)

[fear86]

-