• Как сочетать BEM и динамический контент?

    qfox
    @qfox
    Ответы есть у меня
    У вас здесь 2 проблемы:
    • нужны ли классы для динамического контента;
    • как, если нужно, модифицировать структуру динамического контента.

    Проблема структуры не относится к BEM, она относится к семантике и SEO.

    Если же не смотреть на структуру и тэги (использовать ли small внутри или span, заворчивать ли в article) — то вопрос в сущности нужны ли классы на динамическом контенте или нет. Учитывая, что контент динамический, и нет необходимости иметь классы на тэгах, то допустимо сделать каскад на тэги от некоторого блока: например, dynamic-content или content, text.

    Почему именно теги? Потому что WYSIWYG по умолчанию генерирует теги. Но вы можете использовать какие-то доп. инструменты, которые подправят итоговый html, расставят классы и т.д. (например, с помощью инструментов типа https://github.com/posthtml/posthtml ).

    При необходимости можно дополнительно пометить стили тегов классами.

    <div class="text">
      <h1>Caption <small>Some Foo Bar</small></h1>
      <article>
        <p>Lorem ipsum...</p>
        <div class="text__p">Dolor sit...</div>
      </article>
    </div>


    .text h1, .text__title { /* main title styles */ }
    .text h1>small, .text__sub-title { /* sub-title styles */ }
    .text p, .text__p { /* paragraph styles */ }


    Таким образом вы инкапсулируете все пользовательские стили в одном месте (одном блоке) и не имеете проблем с созданием контента.
    Ответ написан
    2 комментария
  • Как все же правильно именовать классы в БЭМ?

    Kater-auf-Dach
    @Kater-auf-Dach
    Никого не трогаю, починяю примус, верстаю...
    Хотя решение есть и довольно давно, немного уточню и подправлю сам вопрос - если кто еще задается таким вопросом.
    Строго говоря, в оригинальной нотации БЭМ класс.menu_item_active {} будет выглядеть как .menu__item_state_active {}.
    Это случай модификатора типа «ключ — значение», полное имя которого создается по схеме:
    block-name__elem-name_mod-name_mod-val.
    Поэтому не btn_big_red, а btn_color_red и btn_size_big, то есть тут уже 2 модификатора.
    Подробнее - в соглашении по именованию, в самом низу также есть раздел "Альтернативные наименования"
    Ответ написан
    Комментировать
  • Правильно ли так использовать модификатор?

    qfox
    @qfox
    Ответы есть у меня
    Да, вполне рабочий вариант.
    Ответ написан
    Комментировать
  • Эта верстка соответствует бэм принципам?

    qfox
    @qfox
    Ответы есть у меня
    Нет ;-)

    col-md-6 new-left — лучше унести в модификаторы b-layout

    informers — это разметка? лучше как элемент разметки тогда.

    b-inline — тоже скорее к разметке относится, лучше в элементом в b-layout или в специальный блок для разметки

    auth-line — явно элемент auth-form, я бы сделал .form.form_auth или form_type_auth, а этот элемент — form__field.

    ну и дальше в том же духе.
    Ответ написан
    Комментировать
  • Дзен BEM: где держать .bemjson?

    qfox
    @qfox
    Ответы есть у меня
    В bemjson описывается структура в блоках/элементах и данные страницы, бандлы — это, суть, ваши страницы.
    Кажется, теперь очевидно, что bemjson нужно класть в папки бандлов.

    Для чего он нужен? Для того, чтобы знать как собирается страница и из чего она состоит. Фактически, из этого файла собираются все артефакты, а процесс сборки выглядит так:
    1. Собираются все названия блоков и элементов, описанных в файле bemjson;
    2. Из блоков собираются файлы *.deps.js и общий список нужных файлов дополняется блоками из этих файлов, и таких же файлов этих блоков (рекурсивно);
    3. Полный список файлов записывается как bemdecl.js;
    4. Собираются все описанные в сборке технологии (файлы js/css/шаблоны);
    5. Если сборка была из bemjson — генерируется еще и html из bemjson и шаблонов (иначе — просто шаблоны);
    6. Минификация и обфускация css/js файлов (или же еще и компиляция less/stylus/sass в css, es6/coffee в js, etc.).

    Как-то так)
    Ответ написан
    5 комментариев
  • Как разрабатывать при помощи bem-core и bem-tools?

    qfox
    @qfox
    Ответы есть у меня
    Самый простой способ — это склонировать https://github.com/bem/project-stub через git, удалить папку .git, установить node, зависимости (npm install), и начать работать над проектом.

    Чуть сложнее в настройке, но тоже простой — использовать yo и bem-stub, для этого нужно установить ноду, эти два пакета: npm -g install yo generator-bem-stub; и далее в новой папке можно будет запустить yo bem-stub, поотвечать на вопросы, и проект сгенерируется.

    Важно понимать, что bem server скоро начнет внутри использовать enb, так что можно уже сейчас на него переходить и использовать enb server.

    А вообще, на такие вопросы очень быстро можно получить ответ на bem.info и форуме. ;-)
    Ответ написан
    Комментировать
  • Стоит ли изучать фронтенд сразу по методологии БЭМ?

    По сути, это всего лишь соглашение по форме именования классов. Тут даже учить особенно нечего, гораздо важнее понять суть. Конечно, не будет.
    Ответ написан
    2 комментария
  • Какой CSS препроцессор выбрать?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Все топовые препроцессоры дают примерно равный набор возможностей и очень очень мощны. Всегда найдутся люди, которые будут говорить, что им нравится X-препроцессор, ибо там есть киллер-фича без которой они не могут жить, но это всё вкусовщина. Так что просто выбирайте тот препроцессор, синтаксис которого вам будет по душе. Вот и весь принцип.
    Ответ написан
    Комментировать
  • Как разрабатывать при помощи bem-core и bem-tools?

    А разве оф.документация не дает исчерпывающих ответов ?
    Ответ написан
    Комментировать
  • Почему не находит команду enb?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Под линуксом командная строка не ищет исполняемый файл в текущей директории, как в винде. Поэтому, находясь в node_modules/.bin, запускать надо так: ./enb. А находясь в корне проекта — так, как вы указали в ответе.
    Ответ написан
    Комментировать