Create-react-app: Does create-react-app includes a reset css?

[Vadorequest]

I wonder if this tool includes a reset.css (injected dynamically somehow?) (basically to make all websitesbahve the same, regardless of the browser). I'm just curious. If it doesn't, what would you recommend?

Thanks.

[gaearon]

Not currently but I think we should. I just don't know what's the best practice these days.

[Timer]

I'd suggest Normalize.css or Bootstrap's more opinionated Reboot.

[gaearon]

I'm cool with whatever most people would be cool with.

[Timer]

In align with our philosophy, I'd run with normalize. I don't think it's a topic that really needs discussed, its purpose is to fix browsers and normalize them all according to the official spec.
If anything, it'll reduce confusion (which is good!).

I also believe Reboot requires newer browsers, and we support IE 9+, so...

[Vadorequest]

Okay, thanks!

I think i'm gonna go with https://github.com/necolas/normalize.css

So, a simple install & import should work fine.

• Run npm install --save normalize.css
• Add import 'normalize.css'; (in index.js for instance, preferably before everything else)

[gaearon]

This sounds good.

I would probably also tweak our default index.css to do just a few more opinionated things like box-sizing: border-box for everything.

[Timer]

I would probably also tweak our default index.css to do just a few more opinionated things like box-sizing: border-box for everything.

We're pretty much approaching what Reboot does that that point, so it may be more sensible if we add some tweaks (like pixel fallback) and IE9 stuff back from normalize.css.

[gaearon]

Mmm. Reboot looks too opinionated to me. Honestly, Normalize + border-box in index.css seems like all I want, but is there a reason it’s not a good way?

[Timer]

Nope, we can go with it 😄 sorry for my extended rambling.

Do we want to put Normalize into index.css or forcibly include it hidden somewhere?

[gaearon]

I would explicitly put it as a default dependency and an explicit import because people might want to replace it with some other reset and it's okay.

Not sure if it's best to import in JS or CSS.

[luftywiranda13]

@gaearon @Timer

also add this too maybe:

input {
  -webkit-appearance: none;
}

[mlspinylobster]

I think sanitize.css is also good.
It is the normalize.css + border-box you want.

[ummahusla]

@mlspinylobster Thanks! Going to try it

[cloud-walker]

sanitize.css seems a nice improvement (a bit more opinionated) over normalize.css

[cr101]

Will this override a CSS Framework's own reboot.css?

[FDMatthias]

Are there any plans to implement this in create-react-app? If not, could I suggest adding something to the user guide (perhaps some simple steps to install normalize.css or sanitize.css manually)?

[Spy-Seth]

Not sure if it's best to import in JS or CSS.

As this is CSS stuff it seems more natural to import in the CSS.

The only missing feature of CRA is to allow CSS import from the node_modules folder. With this only the documentation should have to be updated to explain how to add a reset in the project

[Timer]

You can import css from node_modules, is something not working for you? Please file an issue!

[Spy-Seth]

Ho I should be drunk last time. Now I succeed to import normalize.css from my node_modules:

/* in index.css */
@import '../node_modules/normalize.css/normalize.css';

So as this works, it seems the most important move is to do this import it the base template. I could try a PR if you want

[Timer]

You can also use this in your index.js:

import 'normalize.css/normalize.css';

But sure, a PR would be appreciated!

[PedroFerr]

Besides reseting BS, you can even mixed up with your own "reset". It works and React respects the order of loading.

// Bootstrap css is @ node-modules, this dir:
import 'bootstrap/dist/css/bootstrap.css';
// Reset everything:
import './reset-css.css';
// Get in 'Normalize.css':
import 'normalize.css/normalize.css'
// And finally import general main css of the entire React App:
import './index.css';

[logicaltitan]

@gaearon I don't think a react boilerplate should include CSS reboot/reset. From what I see a lot of frameworks provide reboot(example Material UI v1, Bootstrap). If I'd be using material UI, then I would like to use the included reboot component and not have to deal with removing/overriding the reboot provided by a boilerplate.

TLDR: I believe CSS reset should be provided(as done by some) by the UI components library or by some external library that the user will add. If anything such introduced into create-react-app, it should be optional.

[mrchief]

Also worth mentioning is postcss-normalize. The biggest selling factors are:

PostCSS Normalize lets you use the parts of normalize.css you need, based on your project’s browserlist.

and

PostCSS Normalize uses the non-opinionated version of normalize.css.

[Nothing-Works]

@Timer is this still going to be added in CRA 2.x?

[Timer]

More than happy to accept a contribution using something like postcss-normalize.

[mrchief]

I'd like to help but I may need a few pointers. Specifically, is this something that is masked by a flag/option or enabled by default? And if there are any dos and donts that I should be aware of, that'd be helpful as well.

[Fabianopb]

This looks a nice feature to have. So I'd say it's enabled by default, one of the core ideas of CRA is that we avoid flags whenever possible. Most important dos and don'ts can be found in the contribution guidelines.

So @mrchief let me know if you plan to grab this one or not, I've contributed to the SASS loader for CRA2 so this looks straightforward to me and I'd be happy to grab in case you're busy. :)

[mrchief]

Thanks @Fabianopb for the pointers. Let me take a shot at this if you haven't started already.

[Fabianopb]

No I haven't, please go on!

[mrchief]

On it!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.