For better or worse, there is reason behind the naming convention. It is known as BEM[1] -- block-element-modifier -- and I've seen quite a few design shops adopt it as standard.
Re:Material Components Preview
by elliotlarson on Thursday December 15, 2016 @07:03PM
(#13189928)
Oh, that's interesting. Thanks for the link!
The conventions they use look like BEM, which is a relatively common approach for component-based design in CSS: https://css-tricks.com/bem-101/
As a nit, I'm not very fond of their CSS naming conventions, using a lot of double underscores and double dashes. For example:
> <section class="mdc-card__actions mdc-card__actions--vertical">
Seems like this could be cleaned up a bit with something like:
> <section class="mdc-card-actions mdc-card-actions-vertical">
But... this is just a matter of personal taste. I'm sure they have their reasons for the approach they took.