Как правильно задать имена классов по методологии БЭМ для следующего кода:
<div class="wrapper">
<div class="container">
<header class="header">
<div class="header__logo"></div>
<div class="header__slogan"></div>
</header>
<section class="content">
<div class="content__bigTitle"></div>
<div class="content__inputArea">
<div class="content__inputArea__name">
<span>
<input id="name" type="text" class="content__inputArea__name__input"/>
</span>
</div>
</div>
<div class="content__sponsor">Sponsor
<div>
<span>
<input type="radio" name="sponsor" value="Yes" class="content__sponsor__yes">
<label for="yes">No</label>
</span>
<span>
<input type="radio" name="sponsor" value="No" class="content__sponsor__No">
<label for="no">Yes</label>
</span>
<span>
<input type="radio" name="sponsor" value="No" class="content__sponsor__Maybe">
<label for="maybe">MayBe</label>
</span>
</div>
</div>
<div class="content__Greek">Greek level
<div class="content__Greek__slider">
<span>Novice</span>
<span>Good</span>
<span>Expert</span>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__date">
<label for="date">Date of hire</label>
<span>
<input id="date" type="text" class="footer__date__input">
</span>
</div>
</footer>
</div>
</div>
...или нужно делать иерархию бэм короче, например, inputArea__name
вместо content__inputArea__name
?