Open
Description
Currently there is a mixture of directly imported CSS and inline styles.
Neither of these approaches is particularly well suited to long term maintenance or readability.
A library should be adopted to drive consistency in styling across the website.
Options:
Styled-Components https://styled-components.com/
- JSX style syntax is a bit confusing for newcomers.
- Good for creating self contained components
- Pretty close to how things are being done currently (simple adoption path)
- Compatible with create-react-app build
CSS Modules https://github.com/css-modules/css-modules
- I haven't used this library.
External SCSS https://sass-lang.com/
- Easy to learn (compatible with traditional CSS)
- Easy to bundle into create-react-app build.
- Has poor traceability from component to where the styles are implemented.