Question

如果你有两个正在越过标记的区块，我会问自己什么是BEM最佳实践。我想在这里与你分享我的问题。在以下两个解决方案中，我们举一个例子：

解决方案A）

<div  class="flexblock" >
    <div class="flexblock__cellelement dateblock">
        ...
        1.1.2020
        ...
    </div>
</div>

解决方案B）

<div  class="flexblock" >
    <div class="flexblock__cellelement">
        <div class="dateblock>
          ...
          1.1.2020
          ...
        </div>
    </div>
</div>

解决方案A）是否允许采用BEM概念（http://getbem.com/）？也许还有另一个更好的解决方案。

Answer 1

正如@Elyas所说，给出的例子并不是一回事。我会尝试解释两者。

A）此“技术”应用于根据父级“改变”元素的属性或位置。这是一个更好的例子：

.avatar {position: static;} 
.header__avatar {position: absolute; top: 0;}
.footer__avatar {position: absolute; bottom: 0;}

一般来说，阿凡达具有静态位置，但在不同的父母中可以有特定的位置。

文档中的详细信息：https://en.bem.info/methodology/css/#external-geometry-and-positioning

在您的示例中，如果.flexblock__cellelement和.dateblock应指向或被视为一个元素，则标记应为：

<div  class="flexblock" >
    <div class="dateblock flexblock__dateblock">
        ...
        1.1.2020
        ...
    </div>
</div>

B） .dateblock只是 E lement .flexblock__cellelement的“孩子”。虽然.flexblock__cellelement可以包含多个元素，但选择.flexblock__cellelement .dateblock这样的选择器并不是一个好主意（当然，在某些情况下可以做一些例外）。

BEM最佳实践 - 交叉块

1 个答案: