Sass nesting using BEM - sass

Question

Im trying to figure out how can i improve my work with sass using BEM. Should i change anything in my code below? I think It's really clean in HTML but in SASS it's hard to find out what is nested in what block. I have one .c-header class at the top and all items in one line using '&'. How can i fix it and make it better?
<header class="c-header">
<nav class="c-header__nav">
<div class="c-header__logo">
<a href="#">
<div class="c-header__circle">
<i class="c-header____leaf fab fa-envira"></i>
</div>
<h1 class="c-header____title">treehouse</h1>
</a>
</div>
<i class="c-header____burger fas fa-bars"></i>
<ul class="c-header__menu">
<li class="c-header__item">home</li>
<li class="c-header__item">about</li>
<li class="c-header__item">blog</li>
<li class="c-header__item">portfolio</li>
<li class="c-header__item">contact</li>
</ul>
</nav>
<div class="c-header__content">
<h1 class="c-header__caption">creative digital solutions</h1>
<p class="c-header__paragraph">Lorem ipsum dolor sit amet consectetur.</p>
<button class="c-header__button">view portfolio</button>
</div>
</header>``

Answer 1

It's one of the purposes of BEM: Make your CSS less dependent of your HTML structure.
That's why we don't have special classes for grand children element. In other words, that's why the .block__element__sub-element classes are forbidden.
According to the official documentation:
Besides the fact that the classes look much nicer, it makes the elements be dependent on the block only. So, you can easily move them across the block when providing changes to the interface. The changes of the block DOM structure would not need corresponding changes to the CSS code.
So yes, your HTML is pretty clean here. And I'm sure your CSS is clean too ;)
PS: some of the classes have too much background, like c-header____burger.

Answer 2

With BEM you should aim to create a cascading hierarchy, so that you can leverage SASS nesting and write your SCSS in components-like structure.
c-header
c-header__nav
c-header__nav__logo
c-header__nav__logo__circle
c-header__nav__logo__title
In that way your SASS should be:
.c-header {
width:100px;
&__nav {
width:101px;
&__logo {
width:102px;
&__circle { width:103px; }
&__title { width:104px; }
}
}
}
Please note that the proposed structure is quite a guess, since I don't have a clear overview of how you project looks but I hope it helps to clarify your doubts.