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

【问题标题】：Which bem unit to use for 'left' - 'right' - 'bottom' - 'top' properties?'left' - 'right' - 'bottom' - 'top' 属性使用哪个 bem 单位？
【发布时间】：2018-12-16 07:36:15
【问题描述】：

我坚持根据 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 中。

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

【问题讨论】：

标签： html css bem

【解决方案1】：

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

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

【讨论】：