This seems like porting CSS into classes, instead of describing the content in HTML and styling it with CSS. That is, the class attribute becomes a de facto style element.
I have seen some scenarios dealing with user-generated content where this might make sense, but otherwise I wouldn't go anywhere near a scheme like this. Even a simple change to your site or UI will require manual updates to every single instance of the class... or more likely, you end up with
.red { color: blue }
.padding-10 { padding: 6px }
Much better to name things to purpose then style to that purpose:
.header { color: $colour-brand; }
The header will always be a header, even if the brand changes.