Войти с помощью github

Ребята, помогите собрать JS-блока.

Цель: 1) Получить реализацию блока в технологии JS 2) Получить минимум знаний по JS в методологии БЭМ, для дальнейшего +/-самообучения

Исходные данные:

  • Блок sitemap, элемент button__icon_close
  • Блок button с миксом menu__button, блок расположен вне блока sitemap
  • Знание JS - ноль.
  • Знание ООП - поверхностное на уровне новичек, язык с#
  • Структура файлов:

BEMJSON:

{
    block: 'sitemap',
    js : true,
    content: [
            {
                block: 'button',
                mix : { block : 'sitemap', elem : 'button' },
                attrs : { title : 'Закрыть меню' },
                icon: {
                    elem: 'icon',
                    tag: 'span',
                    elemMods: {close: true}
                }
            } 
    ]
},
{
    block: 'button',
    mix: {block: 'menu', elem: 'button', theme: 'menu'},
    url: '#',
    title: 'Открыть меню сайта',
    content: 'Меню',
    tabIndex: 2
}

Поиск решения:

Первое что попробовал - вывести лог при клике.

modules.define(
    'sitemap',
    ['i-bem-dom'],
    function(provide, BEMDOM) {

    provide(BEMDOM.decl(this.name, {
        onSetMod : {
            js : {
                inited : function () {
                    this.bindTo('click', function () {
                        console.log('click');
                    })
                }
            }
        }
    }));
});

Консоль браузера сразу заругалась:

jQuery.Deferred exception: i.decl is not a function TypeError: i.decl is not a function
    at Object.<anonymous> (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:35:58)
    at http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1662
    at c (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1009)
    at R (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1792)
    at http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1641
    at HTMLDocument.<anonymous> (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:2:8353)
    at j (https://yastatic.net/jquery/3.1.0/jquery.min.js:2:29568)
    at k (https://yastatic.net/jquery/3.1.0/jquery.min.js:2:29882) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: i.decl is not a function
    at Object.<anonymous> (index.min.js:35)
    at index.min.js:1
    at c (index.min.js:1)
    at R (index.min.js:1)
    at index.min.js:1
    at HTMLDocument.<anonymous> (index.min.js:2)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

в шапке модуля меняю i-bem-dom на i-bem__dom, консоль без ошибок, как и без ожидаемого console.log

Пока в ступоре, и вопросов немного: 1) В чем может быть ошибка, этого простого кода? 2) Как подписаться на событие click блока button, который вне блока sitemap?

Опять вопрос! Суть простая, есть блок topmenu с элементами, по нажатию открываю меню, и хочу для блока page задать дополнительный модификатор

с jquery проблем не возникает

modules.define('topmenu', ['i-bem-dom', 'jquery'], function(provide, bemDom, $) {

provide(bemDom.declBlock(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                this._domEvents('sublink').on('click', function() {
                    this.findChildElem('subwrap').toggleMod('visible', true);
                    $('.page').css('overflow', 'hidden')
                });
            }
        }
    }
}));

});

Но это не правильно, методы поиска .findChildBlock работают с содержимым блока, а для воздействия на другие блоки, нужно прописать в зависимостях или нет?

Хорошего вечера всем!

У меня проблема, не могу самостоятельно разобраться. Существует ссылка, она является "элементом" блока "список" (список меню). До БЭМ ссылка имела анимацию по состоянию :hover, псевдоэлементы before, after окрашивались.

.nav__ul a:after {
    width: 100%;
    height: 2px;
    background-color: #68bdf8;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    transition: .4s;
    transform: scale3d(0, 1, 1);
    backface-visibility: hidden;
    z-index: -1;
}

.nav__ul a:hover:after {
    transform: scale3d(1, 1, 1);
}

В БЭМ методологии существует реализация присвоения классов __hovered, __focused. Стилизовав эти псевдоэлементы анимации не происходит, скорее всего эти классы имеют статичное состояние.

link__hovered:after {
    width: 100%;
    height: 2px;
    background-color: #68bdf8;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    transition: .4s;
    transform: scale3d(0, 1, 1);
    backface-visibility: hidden;
    z-index: -1;
}

link__hovered:after {
    transform: scale3d(1, 1, 1);
}

Проект - https://github.com/DjonyBastone/osipbove-bem-project.git Нужное поведение, реализовано через состояние объекта (::hover), а не через класс link__hovered

Я возможно туплю, но мне интересно - как можно реализовать применение классов состояний в работе с псевдоэлементами?

Добрый вечер.

В конфиге уровни определены:

const builder = Builder({
    levels: [
        'node_modules/bem-core/common.blocks',
        'node_modules/bem-core/desktop.blocks',
        'node_modules/bem-core/touch.blocks',
        'node_modules/bem-components/common.blocks',
        'node_modules/bem-components/desktop.blocks',
        'node_modules/bem-components/touch.blocks',
        // 'node_modules/bem-components/design/common.blocks',
        // 'node_modules/bem-components/design/desktop.blocks',
        'common.blocks',
        'desktop.blocks',
        'touch.blocks'
    ],

Вопросы:

1) Означает ли что с данной настройкой - desktop.bundles/index/index.html соберет в себя уровень touch ?

2) У меня собирает уровень touch для desktop. так и должно быть? Необходимо в конфиге закомментировать "не нужное" находящееся на одном уровне с "нужным"?

Привет, любителям Pug / Jade и БЭМ возможно будет интересен мой велосипед:

+b('alert', 'success')
    +e('text', 'bolder') Success
<div class="alert alert--success">
    <div class="alert__text alert__text--bolder">Success</div>
</div>

Подробнее на GitHub или NPM

Приветствую! Вчера познакомился с БЭМ методологией и решил использовать её в новом проекте, только стиль наименования. Так вот, интересно, правильно ли я пока всё делаю или можно как-то улучшить или в корне неправильно, жду советов и помощи, если что. Заранее хочу предупредить, что использую блоки центрирования контента, .row {margin-left: -15px; marign-right: -15px} col-12 {padding-left: 15px; padding-right: 15px} но их я не отношу к данной методологии, они служат мне просто как разметка и я делаю вид, что их просто не существует, в коде увидите сами, знаю, что так неправильно вроде, но не знаю как под другому сделать, да и так в принципе неплохо. Код codepen.io/anon/pen/ZBVVgy Заранее всем спасибо!

Давно хотел понять, пожалуйста поясните какой смыл в одинаковом содержании разделов платформ.

В документации библиотеки, например BEM Components страницы уровней переопределения "платформы" выглядят идентично с точки зрения документации.

Понятно что каждый уровень может содержать доопределения и какие именно можно разглядеть в табе "Source" (если внимательно присмотреться), и как следствие демонстрация блоков учитывает эти доопределения.

При этом дока, html, BEMJSON deps на первый взгляд идентичны.

Какая в этом польза?

Правильной ли по БЭМ будет такая верстка, или можно сократить, перенеся, например класс блока home-featured-item на уровень container__col container__col_size_6?

<section class="home-featured-items">
    <div class="container">
        <div class="home-featured-items__title">Интересные предложения</div>
        <div class="home-featured-items__ads">
            <div class="container__row">
                <div class="container__col container__col_size_6">
                    <div class="home-featured-item">
                        <div class="home-featured-item__title">Название объекта</div>   
                    </div>
                </div>
                <div class="container__col container__col_size_6">
                    <div class="home-featured-item">
                        <div class="home-featured-item__title">Название объекта</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Здравствуйте! Помогите пожалуйста разобраться с методологией БЭМ на примере. Есть HTML:

<div class="block">
<p class="block__paragraph">Some text</p>
<span class="block__fragment">Some fragment</span>
</div>

Нужно стилизовать селекторы block__paragraph и block__fragment блока block. В дизайне оба селектора имеют одинаковый цвет и подчеркивание.

Вариант 1

.block {
 color: red;
 text-decoration: underline;
}

В результате элементы block__paragraph и block__fragment УНАСЛЕДУЮТ color и text-decoration. Нужно понимать, что так как они ЭЛЕМЕНТЫ, то НЕ БУДУТ использоваться вне блока.

Вариант 2

.block__paragraph {
 color: red;
 text-decoration: underline;
}

.block__fragment {
 color: red;
 text-decoration: underline;
 }

Здесь мы просто копируем одинаковые свойства КАЖДОМУ элементу (много одинакового кода).

Скажите пожалуйста, какой вариант по методологии БЭМ верный? Может есть ссылка на ту часть документации, которая дает ответ на вопрос.

Спасибо.

Как быть если возникает такая ситуация что в css-классе блока нечего писать, оказалась достаточно написать стили только для его элементов - оставлять пустой css-класс блока для единообразия?

Ознакомился с материалами на https://ru.bem.info/, но не могу для себя прояснить ряд моментов, объясните пожалуйста:

  1. Где должен быть описан внешний вид блока (размер, цвет и т.д.): можно в css-классе блока писать или обязательно в модификаторе блока? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?
  2. Где должен быть описан внешний вид элемента: можно в css-классе элемента или обязательно в модификаторе элемента? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?
  3. В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)?
  4. Все что касается позиционирования элемента я могу писать в css-классе элементе?

Здравствуйте, извините, за еще один пост. Просто решил разобраться окончательно и перестать писать в коде //TODO Может и другим будет полезно

Прочем доки, не нашел такого момента как динамический стиль.

Приведу пример, есть навигационный блок на сайте, при открытии меню некоторые компоненты внутри этого блока должны изменить свой вид.

Вот пример

<nav id="navigation-main" class="navigation-bar l-navigation-bar">
    <div class="navigation-bar__container">
        <div class="navigation-bar__toggle">
        </div>
        <div class="navigation-bar__logo nav-logo">
        </div>
        <div class="navigation-bar__menu l-navigation-menu">
            <div class="nav-menu">
            </div>
        </div>
        <div class="navigation-bar__phone-number nav-phone">
        </div>
    </div>
</nav>

Вот нажимает пользователь на меню navigation-bar__toggle и в JS добавляется класс is-menu-opened к элементу с id navigation-main

Собственно вопрос теперь как правильно сделать ? У меня есть две идеи Стоит заметить что на выходе после компиляции получаются практически одинаковые результаты, то есть разница лишь в препроцессоре в данном случае (SASS)

  1. Переложить все обязанности на класс is-menu-opened, то есть он осведомленным в структуре HTML

    .is-menu-opened
      height: 100%
      background-color: #000
      .nav-menu-list
        visibility: visible
        opacity: 1
      .nav-menu-list__item
        opacity: 1
    
  2. Второй вариант, это чтобы сам модуль рисовал себя при определенном условии как надо. В данном каждый модуль должен знать что его могут обрамить в класс is-menu-opened, но с другой стороны нету зависимости от HTML структуры , пример

    .nav-logo
    padding-left: 5%
    text-align: left
    color: $white-color
    .is-menu-opened &
     visibility: visible
    

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

Спасибо большое.

Здравствуйте,

Спасибо, использую в проектах БЭМ. Использую не весь стек, а именования.

Возник вопрос про расположение именно в дереве.

Вот код

<div class="burger-menu__container">
            <div class="burger-menu" id="burger-toggle">
                <div class="burger-menu__bar burger-menu__bar--top"></div>
                <div class="burger-menu__bar burger-menu__bar--bottom"></div>
            </div>
  </div>

Вопрос, может ли самый главный блок модуля (burger-menu) находится по иерархии внутри своего элемента ? Мне это не очень нравится. По семантике и по виду в общем.

Контейнер, тоже вроде это элемент модуля, но по иерархии находится выше.

Как правильно поступить в этом случае ?

 <div class="burger-menu-container">
            <div class="burger-menu" id="burger-toggle">
                <div class="burger-menu__bar burger-menu__bar--top"></div>
                <div class="burger-menu__bar burger-menu__bar--bottom"></div>
            </div>
  </div>

Сделать как отдельным модулем ?

Подскажите пожалуйста как правильно сделать ?

Спасибо

У меня где-то с полгода назад возникла идея о создании интерактивного туториала. Сейчас решил поделиться этой идеей.

Суть игры/туториала

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

Процесс

Уровень 1

Человеку даётся задание собрать дом. Есть готовые блоки: дверь, ручка, окно, крыша и т.д. Человек должен перетаскивать блоки на странице, делать блоки элементами других блоков (собирать свои блоки/сеты/группы).

Для прикола можно сделать кнопку: "Землятресение!". Если человек плохо собрал дом - всё развалится.

Уровень 2

Человек делает JS логику на i-bem по взаимодействию элементов на странице (по готовым API)

Уровень 3

Знакомим человека с шаблонизаторами

Уровень 4

Знакомим человека со сброщиками

Уровень 5 и т.д.

Что это даст?

Системный подход к обучению + всегда можно узнать на каком уровне человек ;)


Написал в общих чертах, но мысль, кажется донёс. Делитесь в комментариях своими соображениями и идеями :)

Подскажите как правильно связать ссылки в меню на соответсвующие блоки на этой же странице? Имено правильно описать зависимость( до изучения бэм использовал id)

Второй вопрос, установил https://github.com/tadatuta/ymaps-and-bem вопрос рабочий ли вариант это?

Про блок в методологии сказано: "Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование."

Какие именно CSS свойства не следует использовать при стилизации блока? Считается ли, что width, height, border, margin, position, float оказывают влияние на окружение? А padding, display влияют? Ещё свойства?

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

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

Сразу скажу, что очень плохо знаю чистый js, но на данный момент уже записался на курс по js в хорошую школу (не буду рекламировать название), но обучение не так быстро, а БЭМ уже хочется использовать, но пока без js.

  1. Как использовать JQuery? Т.к. добавляя в js файл блока команды из jquery они не работают, хотя саму библиотеку на странице подключаю, и в *.bundles эти скрипты подключаются в конец файла index.min.js, но исполняться почему-то не хотят.
  2. Как подключать и использовать другие библиотеки (например: magnific-popup, bxslider, font-awesome и д.р.)? Тоже не понятно, т.к. на страницу подключаю, и они там отображаются, но также как и с jquery работать не хотят.
  3. Как делать адаптивные сайты в данной технологии, точнее как реализовывать структуру? Как я понял, идет разделение на платформы, и т.е. каждый медиа запрос разбивать в зависимости от устройства? Например:
desctop.blocks/
    menu/
        menu.css    //Тут прописываю стили для компьютера

tablet.blocks/
    menu/
        menu.css    //@media only screen and (max-width : 992px) и далее стили для планшета

phone.blocks/
    menu/
        menu.css    //@media only screen and (max-width : 480px) и далее стили для телефона

Правильно ли так делать? И если нет, то поправьте пожалуйста.

  1. Как собрать весь проект воедино в отдельную папку, например dist? Чтобы были разные страницы (index.html, contacts.html), и один общий файл стилей, и общий файл скриптов. Т.е. всё как в простом проекте. Это для того, чтобы сверстанный проект можно было отдать back-end разработчику, который про bem ничего не знает, и хочет получить проект в таком виде.

Друзья, кто компетентен в этом помогите пожалуйста! Если есть возможность объяснить это всё по skype, то это будет вообще идеально. Я понимаю, что знания стоят денег, поэтому в случае компетентной помощи это вообще не вопрос) Спасибо!

Новичок, столкнулся с полным непониманием, вероятно плохо прочитал соответствующую документацию.

Преамбула: имеем header, в нём форму поиска с полем и кнопкой.

Соответственно: .header //block .header-search //block .header-search_input //element .header-search_submit //element

Для .header-search задаем основные параметры:

  • width, height
  • display
  • padding
  • font может еще что-то опционально

Для инпута и сабмита задаем подобные параметры.

А теперь два главных животрепещущих вопроса: 1) Где указываются отступы, бордеры, цвета надписей и прочие оформительские штуки для .header-search, инпута и сабмита? Из того, что я понял из документации, самый простой вариант: вешаем на .header-search какой-нибудь класс-модификатор, навроде ...--default, и в нем описываем все внешние данные, аналогично для инпутов.

В итоге имеем: .header-search_input--default //modificator .header-search_submit--default //modificator

<header class="header">

    <form class="header-search header-search--default">

        <input type="search" class="header-search_input header-search_input--default">

        <input type="submit" class="header-search_submit header-search_submit--default">

    </form>

</header>

Именно так это работает, или я что-то не понимаю?

2) Если мой вариант из вопроса 1 верен, то и изменения в контексте media-query для формы и инпутов указываются для соответствующих модификаторов:

    @media (max-width: 768px){
        .header-search--default{
            width: 100%;
        }

        .header-search_input--default{
            border: 1px solid green
        }

        .header-search_submit--default{
            font-size: 1.3em;
        }
    };

Так это работает, или я и в этом случае всё неправильно понял? :)

Отвечает ли требованиям BEM задание стилей для элементов через модификатор блока. Или же нужно создавать модификаторы элементов?

Доброго времени суток, при использовании bem-core появилась необходимость изменить стандартного блока page, не хотелось бы делать его дубликат, хотелось именно изменить/заменить.

хотелось бы узнать как правильно это делать

Есть желание реализовать автосохранение текущего состояния SPA интерфейса в центральном хранилище, возможность передать его как JSON, как URL и загрузить обратно из JSON/URL.

Т. е. у части блоков имеется не-BEM имя ~ как имя инпута HTML-формы. Как правильно по BEM реализовать такой глобальный функционал? Как лучше хранить данные типа input type=hidden, не имеющие своих блоков?

Заказчик утверждает что это не бэм: https://yadi.sk/i/_C_xzUD4uazU7 Есть у меня список постов на одной из страниц который идет обычном списком вниз, 1 пост 1 ряд. Я с помощью --inline модификатора для главной страницы переделал данный блок постов в ряд, по 4 поста в ряд теперь. Это БЭМ или нет? И если нет как правильно? Вешать класс на каждую вьюху?

Опубликовали два новых документа по методологии

Быстрый старт: https://ru.bem.info/methodology/quick-start/

БЭМ для CSS: https://ru.bem.info/methodology/css/

Приятного чтения :)

Переношу пост @avprinciple из https://github.com/bem/bem-forum-content-en/issues/38 Ниже цитата:

Приветствую!

Как избежать большого кол-ва элементов от 1 блока? Проблема возникает, когда много элементов в блоке, но нужно сохранить зависимость от родительского блока.

Sample

  <section class="meet-us">
    <div class="container">
      <h3 class="meet-us__title heading-3">Meet Us</h3>
      <div class="meet-us__items">
        <div class="meet-us__item">
          <img class="meet-us__img" src="img/team-1.jpg" width="269" height="355" alt="Team member">
          <div class="meet-us__info">
            <h5 class="meet-us__name">Kirkorov</h5>
            <p class="meet-us__metier">Babo-pinatel</p>
            <div class="meet-us__social"> <!--  overlay/display:none -->
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="meet-us__item">
          <img class="meet-us__img" src="img/team-2.jpg" width="269" height="355" alt="Team member">
          <div class="meet-us__info">
            <h5 class="meet-us__name">Putin</h5>
            <p class="meet-us__metier">reshala</p>
            <div class="meet-us__social">
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Вместо:

<div class="meet-us__item">
и далее...

или внутри него писать новый блок, например card и:

        <div class="card">
          <img class="card__img" src="" alt="">
          <div class="card__info">
            <h5 class="card__name">Nam</h5>
            <p class="card__metier">Profession</p>
            <div class="social card__social">  <!-- Тут ещё один блок social  -->
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
  1. Правильно ли я разметил по БЭМ-у в 1 примере?
  2. Как мне сохранить зависимость/наследование/связь от родительского блока, то есть meet-us, или если я блок card вставлю внутри meet-us__item, то от него. Добавлять к блоку card второй класс meet-us__card? И как вообще правильно делать?)

Ещё где-то я видел в исходниках какого-то сайта примерно такое:

<div class="block">
  <div class="block__items">
    <div class="block__item">
      <h3 class="block__item-title">BEM</h3>
      <p class="block__item-text">BEM is wow</p>
      <div class="block__item-media">
        <img src="" alt="" class="block__item-img">
      </div>
      <div class="block__item-social">ya.ru</div>
      <div class="block__item-action">More</div>
    </div>
  </div>
</div>

Как вариант?

И видели ли документацию mdl (Material design light)? Пример:

<ul class="demo-list-two mdl-list">
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bryan Cranston</span>
      <span class="mdl-list__item-sub-title">62 Episodes</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <span class="mdl-list__item-secondary-info">Actor</span>
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
</ul>

Я просто в документации такого рода примера не заметил или пропустил, верно ли так? Вместо mdl-list__avatar, они пишут: mdl-list__item-avatar, и вообще от элемента mdl-list__item, они создают несколько блоков ниже, они так сохраняют связь, логику от имени item, но правильно ли это, или они так интерпретируют BEM под себя? Это хороший пример, когда много блоков/а точнее элементов внутри. Например, в моём первом примере уже есть meet-us__title, я всё от блока meet-us и размечал, элементами, а вдруг внутри meet-us__item у меня завтра появится ещё заголовок, я уже не смогу написать meet-us__title, так как занято, могу конечно написать meet-us__heading, а гугл в (MDL) написал бы meet-us__item-title, они так избегают элемент в элементе - meet-us__item__title, правильно ли будет делать так как они?

Спасибо.

Русская версия форума у меня не работает, ошибка 500, а до этого пост не мог написать, как и на английской версии, поэтому пишу тут.

Хочу в этой теме обсудить структуру проекта по бэму для верстальщика. Верстальщиком называю человека, который превращает PSD в html/css и немного js. Фронтендеры пишут жирный JS и БЭМ :)

Начну из далека. У обычных верстальщиков структура примерно такая (взято из TARS):

static/                                     #  Folder for static-files. You can choose the name for that folder in tars-config.js
    └── fonts/                              # Fonts (can contain subdirectories)
    └── img/                                # Images. You can choose the name for that folder in tars-config.js
        └── content/                        # Images for content (can contain subdirectories)
        └── plugins/                        # Images for plugins (can contain subdirectories)
        └── general/                        # General images for project (can contain subdirectories)
        └── sprite/                         # Raster images, which is included in png-sprite.
            └── 96dpi/                      # Images for displays with dpi 96
            ...
            └── 384dpi/                     # Images for displays with dpi 384 (more info in images-processing)
        └── svg/                            # SVG-images
    └── js/                                 # js
        └── framework/                      # js-frameworks (backbone, for example)
        └── libraries/                      # js-libraries (jquery, for-example)
        └── plugins/                        # js-plugins
        └── separate-js/                    # js-files, which must not be included in ready bundle
    └── misc/                               # General files, which will be moved to root directory of ready project — favicons, robots.txt and so on  (can contain subdirectories)
    └── scss  
        ├── entry/                          # Styles for entry points for css in case of manual css-processing More info [here](css-manual-processing.md).                
        └── etc/                            # Styles, which will be included in the end of ready css-file (can contain subdirectories)
        └── libraries/                      # Styles for libraries (can contain subdirectories)
        └── plugins/                        # Styles for plugins (can contain subdirectories)
        └── sprite-generator-templates/     # Templates for sprite generating
        └── sprites-scss/                   # Mixins for sprites
        ├── separate-css/                   # Css-files, which must not be included in ready bundle
        ├── common.scss                     # General styles
        ├── fonts.scss                      # Styles for fonts
        ├── GUI.scss                        # Styles for GUI elements (inputs, buttons and so on)
        ├── mixins.scss                     # Project's mixins
        ├── normalize.scss                  # Styles reset
        ├── vars.scss                       # Variables

Всё разделено по реализациям и технологиям, и всё инклюдится :)

В бэме эту структуру перевернули с ног на голову и засунули всё в блок.

button
  button.css
  button.js

Допустим у нас одностраничный сайт, и все блоки лежат плоской структурой. Уровней переопределения нет.

project
  index.html
  static
    header
    footer
    button
      button.css
      button.js

Если у нас несколько страниц сайта, то появляется необходимость выделить блоки страниц на отдельный уровень переопределения. К тому же, в этом проекте воспользовались несколькими сторонними библиотеками блоков, которые тоже следует выделить на отдельный уровень переопределения. Уже на этом этапе встает вопрос о том, как удобней и универсальней это сделать.

Первый вариант я подсмотрел в исходниках сайта bem.info.

project
  about.html
  index.html
  static
    blocks
      about               # 3 level
        button
      common              # 2 level
        button
      index               # 3 level
        button
    libs                  # 1 level
      foo-components
        button

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

Второй вариант - это явно указать где что лежит.

project
  about.html
  index.html
  static
    common                # 2 level
      button
    libs                  # 1 level
      foo-components
        button
    pages                 # 3 level
      about
        button
      index
        button

Остановимся на втором варианте. Теперь нам нужно сделать мобильную версию сайта. У нас уровни переопределения будут разветвляться на платформы desktop и mobile. При этом блоки common из общих для всех страниц, превращаются в общие для платформ.

Вариант "в лоб".

project
  about.html
  index.html
  static
    common                # 2 level
      button
    libs                  # 1 level
      foo-components
        button
    desktop
      common              # 3a level
        button
      pages               # 4a level
        about
          button
    mobile
      common              # 3b level
        button
      pages               # 4b level
        about
          button

Я считаю, что такой вариант имеет место быть, если вы не боитесь большой вложенности. Даже можно выделить в плюсы тот факт, что для реализации платформы mobile достаточно всего лишь дублировать папку desktop, переименовать и начать переписывать блоки.

Можно эту структуру представить в плоском виде. При этом в названиях папок через точку определять ее "тип". В этом месте мы подбираемся к "бэму головного мозга". Добавим к этому, что источников библиотек у нас стало несколько (допустим, они не пересекаются в плане используемых блоков).

project
  about.html
  index.html
  static
    bower.libs
      foo-components
        button
    common.blocks
      button
    desktop.blocks
      button
    desktop.pages
      about
        button
    mobile.blocks
      button
    mobile.pages
      about
        button
    npm.libs
      bar-components
        input

Схлопнутый вариант:

bower.libs
common.blocks
desktop.blocks
desktop.pages
mobile.blocks
mobile.pages
npm.libs

Если для генерации html использовать шаблонизаторы, то их можно хранить внутри блоков, либо как технология проекта *.templates.

Резюмируя, у меня получается такая структура проекта. Для собранной верстки с последующей отдачей бэкендерам, можно предусмотреть папки в технологии *.dist.

bower.libs
common.blocks
common.templates
desktop.blocks
desktop.dist
desktop.pages
desktop.templates
mobile.blocks
mobile.dist
mobile.pages
mobile.templates
npm.libs

Хочется определиться со структурой и придерживаться ее во всех проектах любой сложности. Надеюсь на вашу помощь в плане того, правильно ли я понял и применяю идею технологий реализации проекта как блока. Также очень интересно узнать как бы вы по бэму положили в проект шрифты, спрайты, переменные и миксины (SCSS, LESS).

Всем привет. Отвечая на тикет #1090 всплыла слабая сторона в БЭМ документации.

В сообществе есть люди, которые используют БЭМ на разных платформах (JS, PHP, Ruby, .NET и т.д.). Но на bem.info нет раздела про гайды о подключении / внедрении БЭМ. Всё разбросано по форуму, разбросано в ответах.

Нужно помочь развитию БЭМ гайдами по внедрению в проект, ведь здесь ОЧЕНЬ и ОЧЕНЬ большой провал. Всё сводится к тому, что: "Да, можно внедрить куда угодно". Но вот как это сделать, где примеры?

Что нужно от разработчиков БЭМ?

Сделать на сайте раздел гайдов.

Что нужно от сообщества БЭМ?

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

П.Н.

Как-то разработчики БЭМ делали конкурс по разработке. А сейчас можно было бы сделать конкурс по лучшему гайду о том как максимально быстро внедрить всё в проект.

Хотел предложить внести bem в хаб документации devdocs https://github.com/Thibaut/devdocs

пользуюсь им из alfred, так удобнее быстро переходить к описанию методов из API

Но bem выглядит совершенно непопулярным, т.к. количество звёздочек например у https://github.com/bem/bem-core/ сильно меньше 3k У bemhtml и того меньше: https://github.com/bem/bem-xjst

Условия:

  • Source code documentations only (HTML format)
  • Project must be open source (as defined by OSI) and actively maintained
  • License must permit alteration, redistribution and commercial use
  • Project must have >3k stars on GitHub or equivalent

Кажется, с другой стороны, пользовтелей сильно больше 3k, только они не очень активны

Этот показатель хотя и является несерьёзным, всё же используется как ключевой аргумент при переходе на технологию

Может быть сделать цель, увеличить звёздочки? Замотивировать их ставить

Можно в BEM чатик написать прямо, И опосредованно в блогах и на страницах на bem.info Флешмоб на внутреннем семинаре провести + внешние конференции, тоже можно обыграть как-нибудь


Покажи настоящую популярность БЭМ, подари свою ⭐!

Привет. Начал использовать full-bem-stack ибо удобно. Столкнулся с не пониманием уровня детализации и инкапсуляции блока. Скажем, есть у нас стандартный слайдер со слайдами. .b-slider, .-b-slider__slide Каждый слайд состоит из картинки, фонового цвета, заголовка, текста и кнопки.

Как будет правильно создать блок слайдера?

{ 
    block: 'slider', 
    content: [ 
        { 
            elem: 'slide', 
            content: /* здесь выносим все элементы типа slider__slide-title, slider__slide-img т так далее */ 
        } 
    ]
} ```

или лучше для каждого элемента .b-slider__slide задавать аттрибуты, которые дальше превращать в нужную структуру элементов в шаблонизаторе bemhtml ?

P.S. Как в редакторе добавит код в <code> ?

Помогите определиться с тем, как подойти к стилизации блока с табами. Скажем, у меня есть простой блок Tabs с модификаторами horizontal и vertical. Без стилей (за исключением смены flex-direction в зависимости от этих модификаторов). Чтобы не плодить модификаторы, отвечающие за стилизацию самого блока Tab, за стили кнопок и табов отвечают примиксованные к ним элементы другого блока.

Например:

<div class="tabs tabs_type_horizontal booking">
    <div class="tabs__header">
        <button class="tabs__heading tabs__heading_active booking__heading" data-tab="tab_1">Tab #1</button>
        <button class="tabs__heading booking__heading" data-tab="tab_2">Tab #2</button>
        <button class="tabs__heading booking__heading" data-tab="tab_3">Tab #3</button>
    </div>

    <div class="tabs__content">
        <div class="tabs__tab tabs__tab_active booking__content" id="tab_1">
            <!-- content -->
        </div>

        <div class="tabs__tab booking__content" id="tab_2">
            <!-- content -->
        </div>

        <div class="tabs__tab booking__content" id="tab_3">
            <!-- content -->
        </div>
    </div>
</div>

Сейчас на активное состояние табов и кнопок указывает модификаторы элементов блока Tabs. Но как быть с блоком Booking. Ему для стилизации тоже нужно знать активное состояние. Будет ли правильным с точки зрения БЭМ-подхода использовать здесь такую "контекстную" стилизацию .tabs__heading_active.booking__heading?