Identify and use a library to manage styles

[tomflenniken]

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.