БЭМ-style вёрстка http://learn.javascript.ru

[iliakan]

Всем привет,

Нужна помощь в БЭМ-style вёрстке новых интерфейсов для http://learn.javascript.ru.

Стек: JADE (bem-jade) + Stylus, без bem-tools. Дизайн в Sketch (нужен Mac).

Важно: делать хороший, поддерживаемый код. Вёрстка публичных страниц адаптивная. Старые браузеры поддерживать не требуется.

Платно или бесплатно - как пожелаете. У проекта есть возможности достойно финансово поддерживать участников, это не проблема.

Мне бы хотелось постоянного сотрудничества с грамотным коллегой, т.к. по хорошему там надо и отрефакторить вёрстку, проект сильно вырос за последний код, нужен трезвый и опытный взгляд на структуру.

Да, и разумеется, всё что вы сделаете - Open Source! Текущий код проекта: https://github.com/iliakan/javascript-nodejs, стили в styles, jade-шаблоны - в соответствующих модулях.

Буду рад работать с грамотным коллегой!

Пишите на мой email: iliakan@gmail.com или в скайп ilya.a.kantor.

---

С уважением, Илья Кантор

[pavelpower]

Мой совет - на старте избавляйся от bem-jade. Он сильно ограничен в переопредлелениях и будешь много тратить времени на работу с ним по сравнению с BEMHTML или BH.

Этот совет основан на своем личном опыте.

stylus - хороший выбор.

[iliakan]

@pavelpower можно пример проблемы с bem-jade?

[pavelpower]

У нас проблема с bem-jade всплыла в сложности реализации переопределений. Когда вынесли в отдельные блоки общий функционал и не общий стали переопределять оказалось, что на bem-jade нужно больше велосипедить.

А почему? Дело в том, что bem-jade работает так: jade template -> html А шаблонизаторы BH и BEMHTML работает так: data -> BH | BEMHTML -> html

Т.е. ты на уровне data (bemjson) можешь легко формировать верстку, а BH и BEMHTML ее модифицируют.

Попробуй по баловаться с BH: https://bem.github.io/bh/ с переопределением блоков.

Например:

{  block: 'button', tag: 'input', value: 'Кнопка' }

// layer 1
bh.match('button', function(ctx) {
    ctx.tag('a');
    ctx.attr('role', 'button');
    ctx.content(ctx.param('value'));
});

// layer 2
bh.match('button', function(ctx) {
    ctx.tag('button', true);
    ctx.attr('role', 'button');
    ctx.content({
        elem: 'text',
        content: ctx.param('value')
    }, true);
});

[iliakan]

в этом стеке нет bemjson

[pavelpower]

Да, и это плохо.

[iliakan]

Дальнейшее развитие вёрстки будет зависеть от того, кто будет заниматься этой частью проекта.

[pavelpower]

@iliakan тут то и вопрос, а хотим ли развития проекта?

Если да, то лучше уже сейчас упростить процесс верстки - перевести на bemjson + bemhtml Могу подтвердить от себя, что такой стек упрощает жизнь верстальщика, у величивает возможности, относительно bem-jade.

Мы прошли этап с bem-jade и он оказался не годным к развитию и быстрой модернизации.

[iliakan]

Возможно, но я не очень знаком с этим стеком.

[pavelpower]

@iliakan рекомендую. В принципе верстальщик перешедший на стек bemjson+bh, у нас, с bem-jade высказал, что ему на много легче стало жить.

[qfox]

без bem-tools

bem-tools превращается в набор утилит для работы с БЭМ библиотеками и проектами. Всякие создания блоков с разными технологиями, перемещения блоков, создание модификаторов, зависимости, и пр. пр.

Если будет желание использовать bh или bemhtml, то нужна будет сборка, с настройкой поможем, можно прям на гульпе сразу.

[iliakan]

@zxqfox по некоему стечению обстоятельств мне не написал ни один верстальщик, работающий на полном БЭМ-стеке. Хотя в прошлом у меня такие учились, помню решения JS-задач с БЭМ-вёрсткой :)

[voischev]

@iliakan это особый вид верстальщиков. Обычно они уже при нормальной работе :)

[iliakan]

Да, делать самый лучший учебник JavaScript - уж точно не "нормальная" работа :)

[qfox]

@iliakan Кмк, дело не в сложности/неправильности текущего стека (bem-jade тоже далеко не сразу понятно как готовить), или в отсутствии кадров, а в том, к кому направлено предложение. Ощущение, что до целевой аудитории ваше сообщение просто не дошло ;-).

btw, вы сами как относитесь к пробам такого рода? bemjsonчик и всякое такое.

[iliakan]

@zxqfox: я немного слышал про формат и его преимущества, на практике применять не приходилось, но то, что я слышал, меня не отпугнуло, выглядело достаточно гибко и юзабельно :)

Закрываю эту issue, т.к. написали из студии csssr ребята, у них как раз такой стек, попробуем с ними поработать.

[voischev]

Удачи! :)