如何根据边界元法命名子元素？

Question

我对 BEM（块元素修饰符）类命名约定有疑问。

如果我需要有 3 个嵌套的 div，我应该如何命名第 3 个的类？

.one{} //block
.one__two{} //block element
//?

<div class="one">
  <div class="one__two">
  
    <!-- How should I rename class "three"? -->
    <div class="three"></div> 
    
  </div>
</div>

我想将“.three”重命名为“one__two__three”或“two__three”，但我不确定这是否正确，因为据我了解，根据 BEM，不允许在元素内嵌套元素。

Answer 1

对我来说，这是关于关系，尤其是键值关系，所以我会这样处理。

在不探索上下文命名范例的情况下，建议使用one__three。

或者，如果one 只是two 的容器，那么one 可以重命名为two__container 和three 重命名为two__item。当然，使用这样的编号标签并没有多大意义，但我希望你能看到它可能导致的结果。