[RFC] CSS Modules → JSS

[sapegin]

Why:

• Easy to override styles via style guide config.
• Very easy to override colors and fonts via style guide config.
• Styles isolation (with jss-isolate plugin).

Styles overriding:

 module.exports = {
    title: 'React Style Guide Example',
+   theme: {
+       link: 'red',
+   },
+   styles: {
+       ComponentsList: {
+           item: {
+               borderLeft: '1px solid blue',
+           },
+       },
+   },
};

What do you think?

[aaronjensen]

Looks good to me. I'm still using the default styling, but having an easier way to override it seems like a win. One thing I wonder about is if the jss-isolate will affect the actual styleguided components base/global styles (things like box-sizing, font-family, color, etc.) I don't add them to each component, I just set them globally.

[sapegin]

Good point, I’ll check it.

[sapegin]

Something to think about: https://github.com/theme-standard/spec

[mik01aj]

I don't know much about JSS in particular, but I remember being excited about the CSS-in-JS approach, then asking on SO if this was actually a good idea, and finally realizing that CSS as such actually makes a lot of sense. Around that time I also read a great followup on this discussion from @keithjgrant.

So, proceed with caution :)

[sapegin]

@mik01aj I don’t believe in separation of CSS and JS ;-) but I still prefer CSS for its syntax and especially for available tooling.

But here is not a regular site and even not a regular web app. Wee need our styles to be isolated from user styles: user styles (especially global styles like typography) shouldn’t affect style guide UI and vice versa.

So I think JSS if a good solution for Styleguidist. It makes style overriding simpler and it’s not that hard to write it (and we don’t have a lot of styles anyway).

[sapegin]

Merged to next branch.