Являются ли SMACSS, BEM и OOCSS не такими переносимыми?

SO У меня проблема с OOCSS. Он должен быть более портативным, но по сравнению с тем, как я обычно делаю вещи, я нахожу это менее.

Мой пример:

У меня есть характеристика виджета. В основном теле контента (который имеет белый фон) у свидетельства есть черный шрифт. Но в нижнем колонтитуле (который имеет синий фон) отзыв нуждается в белом шрифте.

До OOCSS я сделал бы что-то вроде этого:

#main-content .testominial {
  color: #000000;
}
#footer .testominial {
  color: #FFFFFF;
}

С помощью этого "старого" подхода я мог бы перетащить мой виджет из области содержимого в нижний колонтитул, а цвета просто будут работать - мне не нужно будет менять классы CSS или DOM виджета.

С новым OOCSS/BEM я НЕ должен связывать класс .testimonial с идентификатором (или местоположением), но я должен подклассировать его так:

.testominial {
  color: #000000;
}
.testominial--footer {
  color: #FFFFFF;
}

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

Я что-то упустил? Там, кажется, нет твердых реальных примеров?

ОТВЕТЫ

Ответ 1

Вам нужно рассмотреть возможность удаления имен 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, хотя я также настоятельно призываю как можно увеличить эту цепочку в модулях. Жизнь проще, если я узнаю новый общий раздел или модуль страницы и соответствующим образом упорядочу имена и файлы. В проекте, где код был реорганизован с осторожностью, у меня ничего нет в файлах страниц.

Ответ 2

С помощью этого "старого" подхода я мог бы перетащить мой виджет из области содержимого в нижний колонтитул, и цвета просто будут работать - мне не нужно будет менять классы CSS или DOM виджета.

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

Цель BEM - сделать классы 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 будет дублироваться.

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