Search code examples
cssreactjscreate-react-app

where to put css reset in react project dir


Looking to start a create-react-app (in vscode). I'd like to start clean using some basic css reset code.

Question: Where's the best place to drop css reset in the project?

option a) in the `index.css` file auto generated via `create-react-app`

option b) in the `App.css` file auto generated via `create-react-app`

option c) any other best practice and/or recommendation 

To clarify, index.css and App.css by default are located in the same directory.

and..

App.js is rooted in index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

docs say place reset in index.css. I just want to be sure that index.css 'cascades' properly down to App.css given this structure.


Solution

  • basic css reset can be inside index.css. This will overwrite all default browse styles as index .html is the entry point file. Then the css you write in each component will cascade on top of this style.

    In the end as the cascading effect, you are overriding default browser styles and adds your component styles.