How to name CSS Classes and ID's

Ok so whatever i am about to write in this blog is with the focus for me to understand late when i revisit this blog and for no one else , ok so now with this understanding lets get started .

After making a react component we make divs and try to select them using class names usually so how should we name them what should be the universal syntax that i should follow among all of my projects .

This is my approach to this problem :

if its confusing let me try to explain with an example .

---

Lets try to build a simple card component that looks something like this :

import './App.css'

function App() {


  return (
    <div className='App-main'>


      {/* THE CARD WRAPPER */}
      <div className='App-wrapper1'>

        {/* THE IMAGE */}
        <div className='App-wrapper2-Image_wrapper'>

          {/* lets treat this div as an image */}
          <div className='App-wrapper2-image'></div>
        </div>


        {/* NAME */}
        <div className='App-wrapper3-Name_wrapper'>
          <h1 className='App-wrapper3-h1'></h1>
        </div>


        {/* POSITION AND CURRENTLY WORKING */}
        <div className='App-wrapper4-Current_positon_and_working_wrapper'>
          <h3 className='App-wrapper4-h3'></h3>
        </div>


        {/* ABOUT ME */}
        <div className='App-wrapper5-About_me_paragraph_wrapper'>
          <p className='App-wrapper5-p'></p>
        </div>


        {/* KNOW MORE BUTTON */}
        <div className='App-wrapper6-Know_more_button_wrapper'>

            {/* BUTTON */}
              <div className="App-wrapper6-Button">Know More</div>
        </div>


      </div>
    </div>
  )
}

export default App

I didnot added any actual css because the main goal was to make me understand the naming pattern not how to build a card.

Now this card was a component if it was a page then instead of writing
App-something i would have used the route's name to start for example when working on the contact us page we should have used ContactUs-something

Ok so this more or less concludes my todays work if there is anything more to add or any things that i think needs fixing i will fix it as needed .