CSS Structure about react-boilerplate HOT 15 CLOSED

Have you considered switching to css modules? With that you can also remove the css folder completely and keep the css and component js in the same directory, which makes a lot of sense.

from react-boilerplate.

@hampusohlsson I have, and while I felt it didn't make sense to include them with the original application structure, if we decide to adopt the ducks approach that's definitely something I'm going to reconsider! (see #27)

from react-boilerplate.

There are a number of approaches, but in general it feels like having local css on a component level is getting more and more traction and support in the community (either by css modules or js styles using something like Radium). It makes maintainability a lot easier in large apps, as it removes the need to remember difficult naming conventions and rule pollution of the global css scope.

from react-boilerplate.

css modules (and generally styles near the appropriate js code) make total sense.
css folders are dead :)

from react-boilerplate.

@hampusohlsson @MoOx agreed, read the latest in #27 and check out the v3.0.0 branch, it has a new structure with CSS modules! 👍

from react-boilerplate.

I'm still unsure where to put global CSS rules though, how do you handle that?

from react-boilerplate.

I avoid global css at all cost. That said, there is still some (even just the css-layout default https://github.com/facebook/css-layout#default-values) that I generally put in the "App" component (the top level component).

from react-boilerplate.

How do you handle variables, hacks (e.g. clearfix),...?

On the v3.0.0 branch I currently have a folder called global that holds those files, but I'm not happy with that solution.

from react-boilerplate.

I have very few variables that I send directly using https://github.com/postcss/postcss-custom-properties#variables.
I avoid hacks as class and prefer to use them locally (these days we can use flexbox ;))
You should also check out css modules compose feature (I don't use it, but you might find it helpful).

from react-boilerplate.

For stuff like visually-hidden, maybe you should make a component ;)

from react-boilerplate.

@MoOx ah the component idea actually isn't bad, I like it. Will think about a nice, beginner friendly implementation!

from react-boilerplate.

Yeah, global styles is one thing that kept me from using css modules because I thought it wasn't really possible. I'd like to use the same button styles, form input field styling, etc throughout the application. But the compose functionality seems really interesting! See also http://glenmaddern.com/articles/css-modules

from react-boilerplate.

@jessedobbelaere the a react app, you should just create some Button & Input components ;)

from react-boilerplate.

Pretty big fan of CSS modules now and have more or less decided to use it.
I'm closing this issue, but if you have anything else to say or you think there might be a better way of doing things don't hesitate to comment!

Thanks @MoOx @jessedobbelaere @hampusohlsson for the input, much appreciated!

from react-boilerplate.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

from react-boilerplate.