时间戳

首页 > 解决方案 > 'left' - 'right' - 'bottom' - 'top' 属性使用哪个 bem 单位？

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

问题描述

我坚持根据 BEM 方法对 CSS进行放置left和属性。top我的结构是

<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和topCSS 属性？但是修饰符不需要用于定位。如果我使用修饰符，那么我的top和left属性将同时 inpage-content__calculator-container和 in page-content__calculator-container_shift_left。

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

标签： htmlcssbem

解决方案

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

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

推荐阅读