Search code examples
htmlcssbem

Which bem unit to use for 'left' - 'right' - 'bottom' - 'top' properties?

I am stucking with placing left and top property to CSS according to BEM methodology. My structure is 

<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;
    }

With js logic in some cases I will add page-content__calculator-container_shift_left class for reposition element.

In BEM documentation

In CSS with BEM, styles that are responsible for the external geometry and positioning are set via the parent block.

Bem suggests using page-content__calculator-container - for positioning. But If I want to reposition this element with js class do I need to replace current block element with page-content__calculator-container-repositioned Or do I need add modifier page-content__calculator-container_shift_left - and then use left and top CSS properties inside modifier CSS? But modifier don't need to be used for positioning. If I use modifier then my top and left properties will be simultaneously in page-content__calculator-container and in page-content__calculator-container_shift_left.

What to use in this case? Maybe Am I thinking wrong?

Solution

  • The answer depends on semantics of your project.

    But common answer is that you don't need to replace initial entity with page-content__calculator-container-repositioned. Feel free to add modifiers but pay attention to the order of them in your CSS: _shift_* modifiers should have priority so they could always override styling of page-content__calculator-container.