kovchiy

---
title: Видеорезультат
imports:
    - base.page
    - portal.head
    - serp.organic
    - serp.serp
    - serp.video
blocks:
    serp.video: test

kovchiy

Было:

snippet/
  0.0.1/
  0.0.2/
  0.0.2-exp342/
  ticket-748/
  roma/
  roma2/

kovchiy

Первая версия общего репозиторий дизайнеров Яндекс.Поиска.

Search/
  blocks/
    controls/
    media/
    serp/
      snippet/
 snippet.js

kovchiy

Взаимодействие компонент

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

Ниже пойдет речь о четырех наиболее рациональных способах организации взаимодействия компонентов интерфейса в Beast.

1. Через отношение блок-элемент

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

kovchiy

Beast.decl({
    NavigationItem: {
        mod: {
            state: '', // activated, released
        },
        onMod: {
            state: {
                activated: function (callback) {
                    callback && callback()
                },

kovchiy

/*
 * Блок тумбнеила 
 * Ширина задается числом колонок сетки (добавлением классов grid_col_1, grid_col_2...)
 * Высота вычисляется согласно пропорции (_ratio), в процентах от ширины
 */
.thumb
    display inline-block
    background center center no-repeat
    background-size cover

kovchiy

/*
 * Динамическая сетка 
 * Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell...
 */

.grid
    box-sizing border-box

    /*
     * Генерирует стили для сетки

kovchiy

/*
 * Формат для внешнего пользователя
 */
<CardMovies>
    <item href="#">
        <thumb>...</thumb>
        <title>Черный Лебедь</title>
    </item>
    <item href="#">
        <thumb>...</thumb>

kovchiy

/*
 * Фрагмент описания компонента Suggest гибридного приложения для iOS
 */

Beast.decl({
    /*
     * Основной блок
     */
    Suggest: {