Какую единицу bem использовать для свойств 'left' - 'right' - 'bottom' - 'top'? - PullRequest
Новая
       11

Какую единицу bem использовать для свойств 'left' - 'right' - 'bottom' - 'top'?

0 голосов
/ 16 декабря 2018

Я застрял с помещением свойств left и top в CSS в соответствии с методологией БЭМ.Моя структура 

<body class="page-content">
    <div class="page-content__calculator-container page-content__calculator-container_shift_left calculator-container">
        <div class="calculator_container__button calculator_container__button-close"></div>
        <div class="calculator-container __content calculator-content">
        </div>
    </div>
</body>

<style>
    .page-content__calculator-container {
        position: fixed;
        top: 5vh;
        left: 3vw;
    }

    .page-content__calculator-container_shift_left {
        left: -3vw;
    }

В некоторых случаях с помощью логики js я добавлю page-content__calculator-container_shift_left класс для элемента репозиции.

В документации БЭМ

В CSS с BEM стили, отвечающие за внешнюю геометрию и позиционирование, задаются через родительский блок.

Бем предлагает использовать page-content__calculator-container - для позиционирования.Но если я хочу изменить положение этого элемента с помощью класса js, нужно ли заменить текущий элемент блока на page-content__calculator-container-repositioned Или мне нужно добавить модификатор page-content__calculator-container_shift_left - и затем использовать свойства left и top CSS внутри модификатора CSS?Но модификатор не должен использоваться для позиционирования.Если я использую модификатор, то мои свойства top и left будут одновременно в page-content__calculator-container и page-content__calculator-container_shift_left.

Что использовать в этом случае?Может я не так думаю?

1 Ответ

0 голосов
/ 16 декабря 2018

Ответ зависит от семантики вашего проекта.

Но общий ответ заключается в том, что вам не нужно заменять исходную сущность на page-content__calculator-container-repositioned.Не стесняйтесь добавлять модификаторы, но обратите внимание на их порядок в CSS: модификаторы _shift_* должны иметь приоритет, чтобы они всегда могли переопределить стиль page-content__calculator-container.

...