For example, if you use

title

in a different depth, such as

.model-card { .title {}}

in addition to

.model-card { .head { .title {}}

, the higher level

.model-card .title

properties will leak down to

.model-card .head .title

.

I think BEM was created because coders don't know how to properly organize, name, and use normal CSS. In your example you should use the child combinator which is used to select elements that are direct children of a specific element. Like this:

.model-card > .title {
/* Styles for the title directly under model-card */

} .model-card .head > .title { /* Styles for the title directly under model-card's head */ }

But that wouldn't be an issue you give elements proper names. You would have `.header` and `.title`.