CSS audit needed

[joelit]

Description of the enhancement

With Skosmos main CSS file approaching the thousand line mark, we need to go through the individual definitions to spot inconsistencies

It would be easiest to bring the style sheet in line during the front update but before we start to finalize small details. If we are to define a colour theme picker, the CSS refactoring should be done before it.

What tools we should consider?

• https://purifycss.online/
• https://uncss-online.com/
• https://developer.chrome.com/docs/devtools/coverage

What approaches we can use

• Avoid specifying font sizes in px #1320
• This seemed relevant, as we have a base template, additional templates, modules and themes: https://smacss.com/book/categorizing/

Why is the enhancement important?

We can proceed with the old CSS file and add to it when needed. It would just become even harder to maintain than currently, so we maybe should pay CSS some attention as a whole sooner rather than later.

[kinow]

I found that being able to use scss/sass drastically reduced and simplified some of my stylesheets. Having things like

@mixin skosmos-elem-div {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  ...
}

And reuse it in several places as needed,

#sidebar {
  @include skosmos-elem-div
}

#search-results {
  @include skosmos-elem-div
}

Which reduces duplication, and it is a lot easier to update. As well as being able to use hierarchy to define styles.

.skosmos-elem {
  font-family: name;
  font-size: 10px;
  
  &-special {  # skosmos-elem-special
    color: red;
  }

  div {
    p {
      @include some-mixin
    }
  }
}