Допустимо ли такое объединение классов CSS?

Некоторое время я полагался на следующую технику. Но я нечасто с ним сталкивался, да и информации по нему найти не удалось. Может быть, у него есть собственное имя, о котором я не знаю? Я называю это цепочкой, потому что, похоже, именно это: объединение имен классов CSS вместе. Но поиск по цепочке по большей части дает информацию о jQuery.

.button {
   background-color:#ccc;
}
/* This is what I'm unsure of, notice there is no space between .button and .on */
/* If there were, .on apply to the child of .button, but that's not my intention */
.button.on { 
   background-color:#fff;
}

Это позволяет мне использовать одно имя класса (on), чтобы различать состояния нескольких элементов.

<a class="button"></a>
<a class="button on"></a>
<a class="button-two"></a>
<a class="button-two on"></a>
<!-- etc... -->

Это очень удобно с динамическими страницами, когда вам нужно переключить класс в для нескольких элементов, используя одно имя класса.

Но действительно ли это?