The component heirarchy tool in React Devtools (https://chrome.google.com/webstore/detail/react-developer-to...) lets you select something in the page and then click a button to go to it's component definition in the code (if your sourcemaps are working properly). It's the angled brackets in the right hand side panel - https://imgur.com/a/ufCPsMo It's very useful.

I find the react Component view occasionally useful for diagnosing state issues, but most of the time I'm just twiddling CSS from the Element view. YMMV, of course.

I'm the original author.

Somewhere else on my blog is an article about using BEM with content management systems (which is my area of specialization). I basically endorsed your exact practice, but with __content models__.

The idea being that a content model could have multiple presentations (views), but still relies on a single core .... data model. So the Block is that data model and the modifier is the view.

So your practice is 100% what I would endorse. This is a sample of the CSS guidelines I'd produce for my teams where you'll see that I explain it a bit more: https://gist.github.com/paceaux/f31e278613ab29b74a412a7eb504...

The BEM naming convention for css works matches this concept quite well

Great tip, will be stealing this.