Honestly, if you have mastery of selectors, combinators, and so forth, it should be telling you what utter ignorant halfwit incompetent TRASH that whole "CSS architecture" section is with the "pissing on the markup" of all those pointless idiotic classes for NOTHING.

BEM, OOCSS, SMACSS, etc, etc, being the go-to for people who never embraced proper semantic markup, never learned enough CSS or HTML to be writing either, and in general even fail to grasp why HTML is separate from CSS in the first place.

I'd punch myself in the face before I'd allow code like your "my-sample-compontent" to be deployed, since you're slopping endless pointless garbage classes in instead of leveraging selectors!

It's like "wow, an H3 is a title? and apparently a "msc-title" too as if the parent element's class shouldn't already tell us that. Much less the absolute full Gungan trash of class="paragraph" on a paragraph tag. That's as mind-numbingly stupid as <form role="form">... and of course IMG is a image... thank you Captain Obvious.

That's the gateway drug to the monuments to developer ignorance, incompetence, and ineptitude that are HTML/CSS frameworks!

I'm sick to death of seeing people vomit up two to ten times the markup needed to do the job because of practices like that. Selectors and combinators, use them to leverage your perfectly good semantics!

Don't even get me STARTED about the crutch for morons that are preprocessors. If you have enough CSS or it's complex enough that they do anything of use, you've probably failed to grasp how to even use HTML and CSS in the first place.