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类。

在BEM文档中

在带有BEM的CSS中，负责外部几何的样式和定位是通过父块设置的。

Bem建议使用page-content__calculator-container-进行定位。但是，如果我想用js类重新定位此元素，我需要用替换当前的块元素 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的样式。

哪个bem单位用于“左”-“右”-“底”-“顶”属性？

1 个答案: