Skip to content

Clean up and reorganise global styles

Axel Bocciarelli requested to merge global-styles into master

With Bootstrap 4 (and 5) on the horizon, I thought it best to give all the global styles a bit of a look.

First, a reminder:

  • with import './App.css', the styles are imported globally and apply to the entire app;
  • with import styles from './App.module.css', the styles are imported as CSS modules -- every class in App.module.css is namespaced and can only be used through the locally imported styles object: styles.myWrapper.

Here is the gist of this MR:

  • Remove a lot of unused stylesheets and styles.
  • Convert a few simple global styles to CSS modules (e.g. Menu.module.css and BreadCrumbs.module.css instead of Menu.css).
  • Move the remaining global styles to a new src/styles folder and import them all from index.css -- global styles imported from components are hidden away and prone to naming conflicts and unwanted overrides.
  • Convert a few component classes to functions and fix a couple of bugs that I found along the way.

It'll probably be clearer to look at the commits individually than at the whole diff.

Edited by Axel Bocciarelli

Merge request reports