Whats the name of the css technique material design lite (google) implements?

I heard, but cannot find any document to double check, that this technique helps reduce the computer processes with specificity of CSS, when the browser has to calculate which class to apply when a tag has IDs or Classes in the document.

This is an extract from Google Material Design Lite, which uses the technique such:

<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">  
<i class="material-icons">add</i>
</button>

You will notice the class

mdl-button

This one is used as an ID basically. While

mdl-button--colored

is the ID mentioned above, with the class

colored

So, practically this is the same to:

#mdl-button.colored

With the difference that the computer wont have to process the specificity with the ID and Class, because now we only have a unique class.

So again.. the question is "how is this technique called" or if there is no name, maybe can someone post a link to documents that explain deeply the concept?

Cheers guys!