Is it correct in BEM?

Question

css

I'm trying to master and implement the BEM methodology, but while there are doubts with nesting, the class names are getting longer the deeper they go) I'm not sure that I understand this correctly yet.
I made up a small part, I would like to know if I'm doing it right?

<header class="header">
    <div class="container">
        <div class="header__logo">
            <h2 class="header__title">APP Design</h2>
            <p class="header__description">Free PSD Website Template</p>
        </div>
        <form action="" class="header__search">
            <input type="text" placeholder="" class="header__search-field">
            <button class="header__search-button">Search</button>
        </form>
    </div>
</header>
<section class="featured">
    <div class="container">
        <div class="featured__img">
            <img src="images/phones.png" alt="">
        </div>
        <div class="featured__text">
            <h1 class="featured__title">Cursus penati saccum nulla.</h1>
            <p class="featured__description">
                This is a W3C standards compliant free PSD website template from OS Templates. This template is distributed using a Website Template Licence. For more free PSD templates visit
                <br><a class="featured__link" href="https://www.os-templates.com/">OS-Templates.com</a>
            </p>
            <a class="featured__btn" href="https://www.os-templates.com/">
                <img src="images/icon_iphone.png" class="featured__btn-icon">
                <span>Now on the app store</span>
            </a>
        </div>
    </div>
</section>

Answer 1

ihabia , A class cannot grow outrageously due to nesting,
because there is only one nesting Блок -> Элемент.
In your case, you have a jamb in the markup.
1. The logo is a completely independent block.
2. Search the more.
3. In principle, it is permissible to invest layers in blocks, this is not a joint, but when it comes only to decoration, it is hardly worth it.
In total, we have four blocks (well, the container, as the essence of the modular grid):

<header class="header-section">
    <div class="container header">
        <div class="header__logo logo">
            <h2 class="logo__title">APP Design</h2>
            <p class="logo__description">Free PSD Website Template</p>
        </div>
        <form action="" class="header__search search-form">
            <input type="text" placeholder="" class="search-form__field">
            <button class="search-form__button">Search</button>
        </form>
    </div>
</header>

.header-section {}

.header {
  &__logo {}
  &__search {}
}

.logo {
  &__title {}
  &__description {}
}

.search-form {
  &__field {}
  &__button {}
}

Fairly simple markup, simple styles, independent blocks.
The second section is more or less normally marked out.