如何根据BEM命名子元素？

Question

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

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

.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，不允许在元素内部嵌套元素。< / p>

Answer 1

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

如果不研究上下文命名范例，建议使用one__three。

或者，如果one仅是two的容器，则可以将one重命名为two__container，并将three重命名为two__item。当然，使用像这样的编号标签并没有多大意义，但我希望您能看到它可能导致的问题。