Являются SMACSS, БЭМ и простые 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 охватывают эту точную тему

EDIT:я добавил этот пример, чтобы помочь с комментарием, сделанным на мой ответ. Это не 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;
    }
  }
}

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