Сергей delphinpro

<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>

Двойной дефис используется в кастомных свойствах (css-переменных)
Крайне не рекомендуется использовать классы, начинающиеся с двойного дефиса.

ЗЫ.
Почему бы не использовать БЭМ по-человечески, как все?

<p class = "title title_size_big">
</p>

во-первых, никаких конфликтов,
во-вторых, другим разработчикам не придется ломать голову, что же здесь, бл,ть за БЭМ такой...

Да напишите сразу стилем, нафига так морочиться.

<div class="test" style="margin-bottom:10px">
</div>

И я вполне серьезно. Не должно быть таких модификаторов. Я уже подробнее писал по этому поводу, повторятся лень. Вкратце, если вам нужно по-быстрому поправить в каком-то месте стиль - воткните его инлайном.
Или заморочьтесь, продумайте семантику модификатора, нормально его назовите и используйте.

НЕТ.

Вы можете сделать такие стили

.block {} /* без стилей */
.block_green { color: green; }
.block_red { color: red; }

Но все равно должны писать блок И модификатор в разметке

<div class"block block_green">
</div>

Понятное дело, что технически будет работать и без указания блока. Но если вы придерживаетесь БЭМа, блок указывать нужно обязательно.

<div class="block1">
    <div class="block1__title title">Title</div>
</div>
<div class="block2">
    <div class="block2__title title">Title</div>
</div>
<div class="block3">
    <div class="block3__title title title_size_large">Title</div>
</div>
<div class="block3 block3_theme_dark">
    <div class="block3__title block3__title_inverse title">Title</div>
</div>

Формально там БЭМ в классической нотации block__elem_mod-name_mod-value

class="text text_size_s24 text_align_left"

Мы видим здесь блок text с модификаторами.
Модификатор size со значением s24
и модификатор align со значением left

Тот факт, что модификаторы вырождены до одного css-свойства, не превращает БЭМ в AtomicCSS.

ihabia, Класс не может разрастаться до безобразия из-за вложенности,
потому что вложенность всего лишь одна Блок -> Элемент.

В вашем случае у вас есть косяк в разметке.
1. Логотип это вполне самостоятельный блок.
2. Поиск тем более.
3. Вкладывать прослойки в блоки в принципе допустимо, это не косяк, но когда речь идет лишь о декорации, то вряд ли стоит.

Итого имеем четыре блока (ну и контейнер, как сущность модульной сетки):

<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 {}
}

Достаточно простая разметка, простые стили, независимые блоки.

Вторая секция более-менее нормально размечена.

Вопрос немного странный. БЭМ вполне четко и однозначно всё предписывает. Проще некуда.
Я конечно не знаю вашей структуры, но в принципе это может быть что-то вроде этого:

<div class="site">
        <header class="site__header"></header>
        <main class="site__main page">
            <div class="page__breadcrumb breadcrumb"></div>
            <article class="page__article">
                <div class="page__title"><h1></h1></div>
                <div class="page__content"></div>
                <footer class="page__footer"></footer>
                <aside class="page__meta-information"></aside>
            </article>
        </main>
        <footer class="site__footer"></footer>
    </div>

В любом случае жестких рамок нет, просто соблюдайте общие рекомендации методологии.

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item_state_active"><a class="menu__link" href=""></a></li>
    <li class="menu__item"><a class="menu__link" href=""></a></li>
    <li class="menu__item"><a class="menu__link" href=""></a></li>
  </ul>
</nav>

У БЭМ не существует глубокой вложенности!
Блок -> Элемент
Всё.

Из этого и исходите.

Например

<div class="section">
  <div class="title">
    <h2>Заголовок</h2>
    <div class="title__subtitle">Подзаголовок</div>
  </div>
  <div class="inner features">
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
  </div>
</div>

js__no для задания через него стилей на случай ситуации с отключенным js
Если js работает, класс подменяется на ua_js_yes

Модификатор не должен использовать в отрыве от своего блока. Модификатор .text_accent подразумевает, что модифицируется блок .text.
Логотип либо так

<div class="logo">
    <a href="/" class="logo__link">Веб<span class="logo__accent">Студия</span></a>
</div>

либо так

<div class="logo">
    <a href="/" class="logo__link">Веб<span class="text-accent">Студия</span></a>
</div>

Dj втором случае вы можете использовать блок text-accent где угодно.

Блок - универсален и независим (в идеале). Он может располагаться в любом месте сайта без ущерба для собственного вида. Поэтому блокам не задаются стили, влияющие на позиционирование.
Элемент - неотъемлемая часть блока, не существующая вне его. Поэтому элементу можно задать позиционирование в пределах своего блока.
Микс решает проблему позиционирования блока. В данном случае нам нужно задать расположение блока поиска. Но блоку мы не можем задать width, left и т.п. Поэтому делаем этот же блок элементом другого (внешнего) блока и уже как элемент позиционируем.

Почему не модификатор? Потому что

Модификаторами в БЭМ задают блокам внешний вид, состояние и поведение.

Позиционирование не относится ни к одному из этих вариантов.

Обо всем этом написано https://ru.bem.info/methodology/css/ в разделах "Модификаторы" и "Внешняя геометрия и позиционирование"

UPD
Пожалуй стоит дополнить, что все вышенаписанное, как должно быть понятно, относится именно к позиционированию. Если вы миксуете какие-то стили, которые "задают блокам внешний вид, состояние и поведение", то тут вполне возможно использование модификатора.

Если блоки одинаковые, и отличаются лишь содержанием, то это один блок с разным содержанием. Я так считаю.