Create-react-app: starter app and those two misleading css files

[kswope]

src/index.css
src/App.css

Combine the content of these two files for clarity

To me, and I think to almost all beginners, this would imply there is some kind of scoping going on. I just assumed CSS Modules were in play. Sadly no. Appening 'App-' to all App.css rules is just promoting bad practice.

Better yet, get CSS Modules working as default, its just two lines in the webpack config.

[gaearon]

I agree it’s not ideal. Maybe we could solve this with a comment. I wanted to do it in the past https://github.com/facebookincubator/create-react-app/pull/735 but wasn’t satisfied with the wording and kinda bailed on that. Do you think you could suggest a helpful comment for this?

Keeping them apart is intentional. There is no automatic scoping, but at least it demonstrates that we encourage you to keep a separate style file for each component, as opposed to putting everything in one file. This is already a big departure from familiar for a lot of people, as it introduces them to “thinking in components”. I think this is an important part of learning React. It’s better that you assume scoping, and get burned, than if you keep everything in one file (or divide files by some other boundary than components) and expect this approach to scale for components.

Better yet, get CSS Modules working as default, its just two lines in the webpack config.

It is a non-standardized language that is still changing, and tightly coupled to specific tools. We are considering enabling it as an opt in, but I don’t think it’s a good default. Even CSS modules creators who I spoke to agree with this.

[cr101]

Enabling CSS Modules as an opt-in would be great

[kswope]

Show that there is a global css option by renaming index.css to global.css? You can't mistake that.

Now for a scoped example (shrug)

React and CSS is chaos now, I don't blame any framework for not wanting to commit to anything right now. However, is enabling the modules/localIdentName on the ever-present css-loader actually making a commitment?

I spend most my time in the Vue.js world, I forgot this was even a thing :) . Same with hot reloading :P

[cr101]

The structure of this project starter is pretty common where you could have:
App.js
/pages
-- index.js
-- about.js
/components
-- header.js
-- footer.js
-- layout.js

[maximeg]

Renaming to index.css to global.css plus a bit of wording should do the trick.

For App.css, that's the stylesheet of the App component. Having it conveys the meaning that a component's CSS should be apart for that component (isolation).
Maybe the default should be to have a src/components with App.js & App.css in it.

For the CSS chaos, it struck me for a long time. The CRA defaults is fine enough, brings isolation (kind of), not committing and a newcomer can figure out a better solution for its project once it gains experience later, after ejecting.

[kswope]

I got frustrated by this situation and tried out styled-components. I don't want to start a react/css religious fight here, and I was really reluctant to try them because its such a weird idea, but it has three features we're looking for here, 1) completely isolated CSS (like css modules), so you can throw out App.css (or all .css), 2) easy to understand, 3) you don't have to eject! Maybe its a good enough fit to become endorsed by CRA. Having to eject to get more than vanilla CSS is a brutal pain point in CRA, I almost gave up. Something to think about.

[jordyvandomselaar]

I'd just like to add css modules would be a life saver. For this one reason I end up ejecting a lot and I feel like there could be a much easier solution.

[gaearon]

Not feeling strongly about this. Closing as stale.

[jordyvandomselaar]

Yeah, after a while I've started using styled-components, I still remove the css files, but I'm working on a custom project template anyways.