BEM syntax regarding nested elements

[zhouzi]

Hey there! We've been discussing about the BEM syntax regarding nested elements with a friend who prefers the recommended way, e.g:

<div class="person">
  <div class="person__head">
    <div class="person__eye"></div>
  </div>
</div>

I am ok with this notation as long as person__eye can be moved anywhere within person. But then, what if it actually depends on person__head's styling? I believe that writing it like person__head__eye makes it clear that the eye element depends on the head that itself depends on person. Should the "head" be moved to its own block? Isn't the purpose of BEM to make elements' dependencies clearer and more readable?

I know that it's up to everyone to adapt the "convention" to its needs but I'd be curious to have your opinion on this :)

[KittyGiraudel]

Hey.

.person__eye should be movable anywhere inside .person. If you want the eye to be restricted to the head, you need a head block (.head) with an eye element (.head__eye).

<div class="person">
  <div class="person__head head">
    <div class="head__eye"></div>
  </div>
</div>

I hope it helps.

[zhouzi]

I am a bit confused by the combination of person__head and head, any chance you could elaborate? Are they completely independent or one of them depends on the presence of the other? If so, isn't this one becoming a modifier? And otherwise, isn't mixing block classes a bit risky?

Then, what happens if we need to create a new block animal with its own head and eyes? Will we need to apply a animal__head class along with animal-head? e.g:

<div class="person">
  <div class="person__head person-head">
    <div class="person-head__eye"></div>
  </div>
</div>

<div class="animal">
  <div class="animal__head animal-head">
    <div class="animal-head__eye"></div>
  </div>
</div>

[KittyGiraudel]

Like so:

<div class="person">
  <div class="person__head head head--person">
    <div class="head__eye"></div>
  </div>
</div>

<div class="animal">
  <div class="animal__head head head--animal">
    <div class="head__eye head--animal__eye"></div>
  </div>
</div>

• .person__head and .animal__head are used when styling the head of an animal or a person, as part of the animal or the person body.
• .head is used to style a head, independently wether it's from an animal or a person.
• .head--person and .head--animal are used to style a head of an animal or a person, not as part of the animal or the person body but as a standalone element.
• .head__eye is used to style an eye, independently wether it's from an animal or a person.
• .head--person__eye and .head--animal__eye are used to style an eye of an animal or a person, as part of the head of a person or the head of an animal respectively.

[zhouzi]

That's pretty interesting, thank you very much for sharing! :)