Как собирать готовые блоки из компонентов Material Design Light, следуя BEM?

Question

[germn]

В MDL у нас есть готовый набор компонентов, которые мы можем использовать. Допустим, мы хотим добавить на страницу карточку. Для этого, ей нужно добавить стили. В первом же примере на getmdl.io это сделано так:

<!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
  width: 512px;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
</style>

<div class="demo-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
<!-- И так далее. Используются mdl- классы вместе с 
.demo-card-wide -->

С одной стороны, решение понятно: за счёт "привязки" .demo-card-wide к .mdl-card мы избавляемся от проблемы каскада. С другой стороны, если я всё правильно понимаю, по БЭМ элементы .mdl-card могут перемещаться внутри блока, включая вкладывание одного элемента в другой. В этом случае, такая вёрстка сломается. Кроме того, нигде в документации по БЭМ я просто не нашёл такого решения, как с .demo-card-wide

Как сделать демо-карточку правильно? Как добавить стили к компонентам, из которых она состоит, следуя БЭМ?
Я только начал изучать БЭМ и немного знаком с CSS, поэтому смело отвечайте в стиле "для чайников". Спасибо!

Answer 1

[i]

Библиотека MDL применяет БЭМ используя альтернативную схему именования т.н. «Стиль Гарри Робертса».

Если следовать этой схеме, то надо заменить demo-card-wide на модификатор mdl-card--theme-demo:

<div class="mdl-card mdl-card--theme-demo mdl-card mdl-shadow--2dp"/>

Демонстрация

Важно отметить mdl-card--theme-demo это булев модификатор, в этой схеме именования модификаторы вида «ключ-значение» не используются и они могут существовать отдельно от блока примиксовываясь к другим блокам как mdl-shadow--2dp из примера .