Reaction: Add linter for stylesheets to enforce better practices

[mikemurray]

Our CSS is a wild, wild west of many different practices. We should add a linter to enforce some practices, like always using variables for colors, standardize property order, etc.

The stylelint linter seems to be a good choice for this.

Also, comment below if you have any other libraries, suggestions for rules that could be applied to a linter, or modern best practices.

The organization and readability of the stylesheets impacts the theming negatively, let's fix that.

[aaronjudd]

Prefer to choose a tool that also works with GH/CI/CD/Review processes. Codacy support both CSSLint and StyleLint, but has more options in their UI for CSSLint (but can be configured with .xx files). BitHound support CSS checking but their docs/UI doesn't say what services are supported (uggh).

[spencern]

@ticean or @aldeed do either of you have preferences regarding CSS linting or best practices?

[aldeed]

I'll admit I've never linted CSS before. For new React components, moving away from bootstrap dependency, I am proposing we used styled-components pkg with theming, so there is CSS inside JS files rather than css files, and this is their approach to linting that CSS: https://www.styled-components.com/docs/tooling#stylelint

We will still have some standalone CSS, too, so probably need 2 different solutions but pointing to the same set of rules

[aldeed]

@mikemurray Do you think it's worth keeping this open?