Яндекс

Для тех, кто ничего не знает про БЭМ

• Начало
• Вебинар с самых азов
• Видео с прошлого выступления на OdessaJS
• Форум

                      __
                     /  \        ______________
                     |  |       /               \
                     @  @       | It looks      |
                     || ||      | like you      |
                     || ||   <--| are nterested |
                     |\_/|      | in BEM.       |
                     \___/      \______________ /

BEM Project Stub

Смотрим внутрь

• Описание
• Код
  • *.blocks
  • *.bundles
  • сборка: .enb/make.js

BEM Project Stub

Смотрим внутрь

• Описание
• Код
  • *.blocks
  • *.bundles
  • сборка: .enb/make.js

     (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Точечные переопределения

pages/text-only/blocks/mdl-color-definitions/mdl-color-definitions.scss

$color-primary: $palette-pink-500 !default;
$color-primary-dark: $palette-pink-700 !default;

Что ещё можно изменить

Пристальный взгляд Фрая

<ul class="mdl-menu mdl-menu--bottom-right">
    <li class="mdl-menu__item">Lorem</li>
    <li class="mdl-menu__item">Ipsum</li>
</ul>

Что ещё можно изменить

Ничего не напоминает?

<ul style="background-color: green" class="mdl-menu mdl-menu--bottom-right">
    <li style="color: red" class="mdl-menu__item">Lorem</li>
    <li style="color: red" class="mdl-menu__item">Ipsum</li>
</ul>

     (ノಠ益ಠ)ノ彡┻━┻

Что ещё можно изменить

CSS

.mdl-menu {
    background-color: green;

    &__item {
        color: red;
    }
}

HTML

mdl-menu tag ul    __item tag li

Что ещё можно изменить

CSS

.mdl-menu {
    background-color: green;

    &__item {
        color: red;
    }
}

BEMHTML ⓹

block('mdl-menu')(
    tag()('ul'),
    elem('item').tag()('li')
)

Что ещё можно изменить

BEMHTML ⓹

block('mdl-menu')(
    tag()('ul'),
    elem('item').tag()('li')
)

BEMJSON ⓹

{
    block: 'mdl-menu',
    mods: { 'bottom-right': true },
    content: [
        { elem: 'item', content: 'Lorem' },
        { elem: 'item', content: 'Ipsum' }
    ]
}