Яндекс

Владимир Гриненко, Яндекс

Яндекс

Модульная сборка проектов.
И никаких bem-tools.

БЭМ

Владимир Гриненко,
29 апреля 2016, Frontend Party, Санкт-Петербург

О чём речь

Этот подход применим без блоков, элементов, модификаторов

Компонентный подход

Сборка при компонентном подходе

Найти все компоненты на FS

Написать require/import в каждой технологии

Декларируем бандл в терминах компонентов

Было

index.css

@import "../../path/to/component/component.css";
@import "../../path/to/component2/component2.css";
/* project styles */

index.js

require(../../path/to/component/component.js);
require(../../path/to/component2/component2.js);
/* project logic */

Стало

index.decl.js

['component', 'components2']

Декларация — что и в каком порядке подключать в сборку

Получение декларации

Генерация по описанию страницы

<div class="component"></div>
<div class="component2"></div>

Алгебра деклараций

Алгебра деклараций

Объединение

Декларация 1            Декларация 2            Декларация 3

[                       [                       [
    'header',               'header',               'header',
    'button',               'button',               'button',
    'link',                                         'link',
    'attach',     +                        =        'attach',
                            'menu',                 'menu',
                            'image',                'image',
    'checkbox',                                     'checkbox',
                            'popup'                 'popup',
    'textarea'                                      'textarea'
]                       ]                       ]

Вычитание

Декларация 1            Декларация 2            Декларация 3

[                       [                       [
    'button',               'button',
    'checkbox',                                     'checkbox',
    'textarea',                                     'textarea',
    'suggest'                                       'suggest'
                            'header',
                    -       'input',       =
                            'button',
                            'menu'
]                       ]                       ]

Пересечение

Декларация 1            Декларация 2            Декларация 3

[                       [                       [
    'header',               'header',               'header',
    'input',                'menu',
    'link',        ⋂        'button',     =
    'attach',               'input',
    'checkbox',             'image',
    'textarea',             'popup',
    'footer'                'footer'                'footer'
]                        ]                       ]

Композиция. Зависимости между компонентами

Было

my-component.css

@import "../../path/to/component/component.css";
@import "../../path/to/component2/component2.css";
/* my-component styles */

my-component.js

require(../../path/to/component/component.js);
require(../../path/to/component2/component2.js);
/* my-component logic */

Пример

Стало

my-component.deps.js

['component', 'components2']

Стало

my-component.deps.js

{
    mustDeps: ['component'],
    shouldDeps: ['components2']
}

Уровни переопределения

Уровни переопределения позволяют

Пример

library-blocks/    # Уровень библиотеки
  input/
  button/          # Базовая реализация блока button
  popup/

project/           # Уровень проекта
  input/
  button/          # Измененная реализация блока button
  header/

Пример

common.blocks/button/button.css

.button {
    height: 25px;
}

touch.block/button/button.css

.button {
    height: 50px;
    tap-highlight-color: #ccc;
}

Было

@import "library/common.blocks/button/button.css";
@import "library/touch.block/button/button.css";
@import "library/design/common.block/button/button.css";
@import "library/design/touch.block/button/button.css";
@import "project/common.blocks/button/button.css";
@import "project/touch.blocks/button/button.css";

И аналогично для JS.

Стало

[‘button’]

Как это работает

Что дальше?

bem.info/methodology/
build

Ваши вопросы!

Контакты

Владимир Гриненко


bem.info

info@bem.info