Где реализуется внешняя геометрия и позиционирование элементов блока?

Форум /

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

Т.е., к примеру, есть некий блок, в нем допустим несколько элементов. Блок будет переиспользоваться на нескольких страничках, возможно с изменением положения элементов внутри блока.

Оформление и стили элементов вынес в их модификаторы (по одному для каждой странички), а позиционирование (отступы) сомневаюсь, куда по-науке прописать:

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

7 years ago

DjonyBastone

Вариантов масса. С модификаторами - хороший вариант. На своем проекте использую к примеру, так:

Существуют формы обратной связи

Вертикальная форма обратной связи
Горизонтальная форма обратной связи

Общее в формах:

Оформление инпутов, с их состояниями
Некоторый текст
Использование контролов из bem-components

Различие:

Внешнее оформление форм
Расположение элементов внутри форм
Фон формы и т.д.

Общее - находится в блоке без модификатора form, form__input, form__button, form__heading, form__paragraph Различное - раскладывается по блокам с модификаторами form_vertical, form_horizontal, button_red, button_ blue

bemjson - сначала обе формы объявляются одинаково, к форме и кнопке применяется нужное:

{
    block: 'form',
    mod: { vertical : true },
    content: [
        {
           block: 'input',
           mix: { block: 'form', elem: 'input'}
        },
        ...
       {
           block: 'button',
           mod: { red : true },
           mix: { block: 'form', elem: 'button'}
      }
    ]
}

7 years ago

Mich-sp

Отлично, большое спасибо. ))

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