Степень инкапсуляции элемента?

Форум /

Привет. Начал использовать 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> ?

8 years ago

lfoma

Строгих правил нет, нужно выбирать в зависимости от ситуации. Например, будут ваши слайды различаться по структуре? Т.е. может ли быть такое, что у слайда не будет title, или title будет аж два? Если все слайды типизированы, то логичнее выбрать способ описания параметров для каждого слайда, т.е.:

{
block: 'slider',
content: [
    elem: 'slide',
    title: 'Высокие технологии',
    url: '/techs',
    background: '/slide_tech.jpg'
]
}

А потом, на уровне bemhtml уже преобразовывать в нужную структуру

Кстати, что бы сделать блок кода - используйте три кавычки `

8 years ago

mitrey

Спасибо! Значит, если контент блока или элемента ожидается неизменным или максимум зависит от переданных параметров - тогда использовать шаблонизатор + параметры, если контент разный - описывать в bemjson. Верно?

8 years ago

lfoma

Да, всё так. Добавлю, что это в силе для повторяющихся элементов. Если элемент один - лучше так же описывать в bemjson.

8 years ago

mitrey

А зачем описывать в json для единственного? при параметризированном подходе - json чище. Но нужно лезть в bemhtml что бы посмотреть что-то или добавить

8 years ago

lfoma

Для большей гибкости и удобства, лучше описать в одном месте, как мне кажется, чем шаблоны туда-сюда гонять.

8 years ago

tadatuta

BEMJSON — это JavaScript, поэтому достигать минималистичного кода можно за счет функций. На примере слайдера:

{ 
    block: 'slider', 
    content: [ 
        {
            title: 'Высокие технологии',
            url: '/techs',
            background: 'slide-tech.jpg'
        },
        {
            title: 'Еще слайд',
            url: '/other-slide',
            background: 'slide-about-something-else.jpg'
        },
        /* ... */
    ].map(function(slide) {
        return {
            elem: 'slide',
            content: [
                {
                    elem: 'slide-title',
                    content: slide.title
                },
                {
                    elem: 'slide-img',
                    attrs: { src: slide.background }
                },
                /* ... */
            ]
        };
    })
}

В итоге шаблоны остаются очень простыми и гибким, а BEMJSON лаконичным. Ну а как только появится ощущение, что BEMJSON становится слишком «жирным» — пора начинать использовать BEMTREE.

Чтобы оставлять комментарии, необходимо авторизоваться.