CSS Structure

[mxstbr]

Thinking of giving the CSS folder structure a slight tweak in v3.0 too. layout and components folder are too similar - when does something become a layout? How big does it have to be?

Maybe take some inspo from http://sassdirector.com/examples/index.html

[hampusohlsson]

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.

[mxstbr]

@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)

[hampusohlsson]

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.

[MoOx]

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

[mxstbr]

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

[mxstbr]

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

[MoOx]

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).

[mxstbr]

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.

[MoOx]

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).

[MoOx]

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

[mxstbr]

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

[jessedobbelaere]

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

[MoOx]

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

[mxstbr]

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!

[lock]

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.