Разве SMACSS, BEM и OOCSS не так переносимы?

Вам нужно подумать об отказе от имен testimonial, а также от имен footer.

Рассмотрим этот пример:

.primary-box { }
.primary-box--reduced { }
.primary-box--standout { }

В примере классы полностью независимы от контекста своей страницы. В результате классы можно полностью использовать повторно. Любое поле на странице может принимать описанные выше классы и ожидать, что оно будет оформлено точно так, как определено.

Например, у вас может быть:

<header>
    <div class='primary-box primary-box--reduced'></div>
</header>
<div class='content-box'>
    <p class='primary-box primary-box--standout'></p>
</div>
<footer>
    <div class='primary-box primary-box--reduced'></div>
</footer>

Теперь, когда дизайнер возвращается и настраивает заполнение выдающихся блоков, вы можете перейти непосредственно к этим стилям и настроить их, будучи уверенными, что единственные области, на которые будут воздействовать, будут областями, которые имеют эти классы в HTML.

Кроме того, когда вы решите переместить .primary-box--reduced из <header> в строку меню, которая находится над ним, или в нижний колонтитул, вы можете быть уверены, что стили полностью согласуются.

Когда вам где-то понадобится другой элемент, например, primary-box--standout или просто primary-box по умолчанию в заголовке, вы просто создадите его и добавите классы, их стили будут полностью следовать.

Вы также никогда не унаследуете неожиданные стили.

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

Важно отсутствие контекста. В первом примере .testimonial--footer очень зависит от контекста, вам действительно нужно использовать его только в отзывах в нижнем колонтитуле.

И как по волшебству CSS Wizardry покрывает именно это. тема

РЕДАКТИРОВАТЬ: Я добавил этот пример, чтобы помочь с комментарием к моему ответу. Это не BEM или OOCSS, хотя и немного ближе к подходу SMACSS. Вот как я решаю проблемы с css, и это гибридный подход BEM/SMACSS:

Загружается по порядку:

• файлы модулей, такие как .primary-box
• файлы раздела страницы, такие как .header или .call-to-action
• файлы подкачки, такие как .about-us или .contact

Каждый файл становится все более и более конкретным, одновременно создавая более сложные и модули. Основываясь на приведенных выше примерах и, надеюсь, помогая OP, вы можете увидеть такие стили, как:

.header {
  .primary-box {
    color: #000;
  }
}

который переопределит стили модуля, используя более конкретную нотацию вложенного класса. Обратите внимание, я бы по-прежнему избегал использования имени класса, такого как .header - .banner-standout было бы лучше, так как его можно повторно использовать где угодно без путаницы.

Далее можно было даже увидеть:

.about-us {
  .header {
    .primary-box {
      color: #f00;
    }
  }
}

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

При таком «старом» подходе я мог перетаскивать свой виджет из области содержимого в нижний колонтитул, и цвета просто работали — мне не нужно было менять классы CSS или DOM виджета.

Если вы «перетащите» элемент .testominial из контейнера .main-content в контейнер .main-footer, то есть вы измените DOM. Таким образом, вы также можете обновить модификатор в классах CSS без дополнительных затрат.

Цель БЭМ — сделать классы CSS повторно используемыми. Следующие модификаторы можно повторно использовать в различных средах.

CSS:

.testominial {
}
.testominial--darkFg {
    color: #000;
}
.testominial--lightFg {
    color: #FFF;
}

HTML:

<main class="main-content">
    <div class="testominial testominial--darkFg">...</div>
</main>
<footer class="main-footer">
    <div class="testominial testominial--lightFg">...</div>
</footer>

При старом подходе вам придется менять код CSS каждый раз, когда вам нужен новый блок .testominial в новом контейнере. HTML и CSS тесно связаны, и некоторый код CSS будет дублироваться.

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