/* Styling React Apps with Vanilla CSS, Pros and Cons */ // First import the 'PATH-TO-CSS-FILE.css' to 'main.jsx' /* imports are not limited to main.jsx, imports can also be injected into different pages e.g "./Header.css" into './Header.jsx' *** Mind the Hierarchy if one style rule precedes the other. */ * React Code => // "./index.jsx" // ELEMENT <header></header> // CLASS <div className="class_container"></div> // ID <div id="id_container"></div> * Vanilla CSS Rules => // "./index.css" // ELEMENT header{} // CLASS .class_container{} // ID #id_container{} * Pros - Css code is decoupled form jsx code. - You write Css as you know. - Easy collaboration. * Cons - You need to know Css. - Css code is not SCOPED (so can clash across) to COMPONENTS. // With love @kouqhar