4 ms·

I have one frontend naming habit that might be worth sharing. The root element of my react components always have a className that matches the component name ex

I have one frontend naming habit that might be worth sharing. The root element of my react components always have a className that matches the component name exactly (ie capitalized). All other classNames are uncapitalized. Makes navigation pretty easy in browser dev tools.

jamespetercook 5y ago
The BEM naming convention for css works matches this concept quite well
marcusbuffett 5y ago
Great tip, will be stealing this.
paceaux 5y ago
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/f31e278613ab29b74a412a7eb5046422#bem https://gist.github.com/paceaux/f31e278613ab29b74a412a7eb504...
onion2k 5y ago
The component heirarchy tool in React Devtools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en 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 https://imgur.com/a/ufCPsMo It's very useful.
- stickfigure 5y ago
  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.

jamespetercook 5y ago

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

marcusbuffett 5y ago

Great tip, will be stealing this.

paceaux 5y ago

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/f31e278613ab29b74a412a7eb5046422#bem https://gist.github.com/paceaux/f31e278613ab29b74a412a7eb504...

onion2k 5y ago

The component heirarchy tool in React Devtools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en 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 https://imgur.com/a/ufCPsMo It's very useful.

stickfigure 5y ago
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.