Component styles

[andrewn]

Nature of issue?

• New feature request

New feature details:

Currently, CSS is written using SASS and stored together in /client/styles/.

This means re-use happens by re-using classes, which makes it hard to see exactly which component is using the styles and making changes error-prone. Styles are global and so may interact with each other in strange ways.

I propose that we move styles to be local to a component. e.g. a <Button /> component would contain all the styles it uses nearby. Styles would not apply globally, so reuse would happen by using the Button component, or by splitting components into smaller ones to be used elsewhere.

Potential choices

• styled-components
• CSS Modules
• CSS Modules with PostCSS plugins
• SASS Modules
• emotion

Considerations:

• maintainability
• easy of use
• theming
• learning curve for new users
• support for server rendering
• output approach (single CSS files, inline etc)

[catarak]

I have used styled-components with Cycling '74 work and I do like it. I'm not sure the learning curve is any bigger than BEM + SCSS. For me the choice styled vs. emotion! According to this comparison, it seems like emotion has a smaller bundle size and is slightly faster.

[andrewn]

Comparing Styled Components and emotion

They both have a similar API sub-set so there's not much difference between the two...

• maintaibility: both projects seem to be well-maintained and actively developed;

• ease of use: I think both have a very similar API and make it easy to attach locally-scoped styles to components;

• learning curve for new users: once set-up in the project, I think picking up the "styled component" way of writing styles is easy as it's just CSS. I think ensuring people pick good names for things will be important when checking PRs;

• output approach: it's actually really difficult to find any info about how this is done...!

Styled Components

Pros

• Supports theming
• Server rendering: works with streaming HTML

Cons

• Don't think it's ready for concurrent mode

emotion

Pros

• Supports theming
• Ready for React's concurrent mode. But this is still experimental, and would need to whole app to opt-into using it.

Cons

• Server rendering: has trade-offs: a "basic mode" that doesn't support nth-child selectors, and an "advanced mode" that does, but doesn't work with React's server streaming

[andrewn]

Building on top of either emotion/styled-components, Styled System is an interesting approach for creating themable components. It might have too much of a learning curve for this project though as we want to make getting into the codebase as simple as possible.

[catarak]

Since styled-components has already been added to the web editor, I'm going to close this issue into #1760.