How to assemble ready-made blocks from Material Design Light components following BEM?

Question

css

In MDL we have a ready set of components that we can use. Let's say we want to add a card to the page . To do this, she needs to add styles. In the first example on getmdl.io, this is done like this:

<!-- 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 -->

On the one hand, the solution is clear: by "binding" .demo-card-wide to .mdl-card, we get rid of the cascade problem. On the other hand, if I understand everything correctly, according to BEM, .mdl-card elements can move within a block, including nesting one element within another. In this case, such layout will break. Besides, nowhere in the BEM documentation did I find such a solution as with .demo-card-wide
How to make a demo card correctly? How to add styles to the components of which it consists, following BEM?
I've just started learning BEM and I'm a bit familiar with CSS, so feel free to answer in dummies style. Thank you!

Answer 1

The MDL library implements BEM using an alternative naming scheme, the so-called. "Harry Roberts Style" .
If you follow this scheme, then you need to replace demo-card-wide with the mdl-card--theme-demo modifier :
Demo
It's important to note that mdl-card--theme-demo is a boolean modifier, key-value modifiers are not used in this naming scheme and they can exist separately from the block, mixed with other blocks like mdl-shadow--2dp from the example.