Your approach is what others call Atomic or Functional CSS — taking the single responsibility…
Matt Stow

Atomic !== BEM. Not at all. The classes in the OP’s example are focused on targeting a specific kind of element (generally by its functionality), not a specific style. Atomic is all about basically applying inline styles by adding tons of ultra-specific classes to everything, each rule representing one of two style properties.