'left' - 'right' - 'bottom' - 'top' 属性使用哪个 bem 单位？

Question

我坚持根据 BEM 方法将 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 class用于重新定位元素。

在 BEM 文档中

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

Bem 建议使用 page-content__calculator-container - 进行定位。但是如果我想用 js class 重新定位这个元素，我需要用 page-content__calculator-container-repositioned 或者我需要添加修饰符 page-content__calculator-container_shift_left - 然后在修饰符 CSS 中使用 left 和 top CSS 属性？但是不需要使用修饰符来定位。如果我使用修饰符，那么我的 top 和 left 属性将同时出现在 page-content__calculator-container 和 page-content__calculator-container_shift_left.

中

在这种情况下使用什么？也许我想错了？

Answer 1

答案取决于您项目的语义。

但常见的答案是您不需要用 page-content__calculator-container-repositioned 替换初始实体。随意添加修饰符，但要注意它们在 CSS 中的顺序：_shift_* 修饰符应该具有优先级，这样它们总是可以覆盖 page-content__calculator-container.

的样式

'left' - 'right' - 'bottom' - 'top' 属性使用哪个 bem 单位？

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

html

css

bem