refactor css after snapshot testing

[openmindculture]

As the maintainer of my own website, I want to keep the tools up to date and improve maintainability.

After not working on the site for a while, many tools have become outdated. Also, the codebase does not meet my current coding preferences anymore. Style sheets seem too chaotic, markup and content are mixed in a redundant way without leveraging modular possibilities of the static site generation system. And that system has seen two major upgrades meanwhile. While my site still runs on eleventy 0.x, there is a stable 2.0 release available.

None of those overdue changes should be done before increasing test coverage, including screenshot tests and possibly doing cross-browser end-to-end tests and audits.

• improve test coverage
  • click journey both on desktop and on mobile, to check different menu versions
  • screenshot tests
  • cross-browser tests
  • audits
• upgrade tools
  • upgrade PostCSS etc., test, adapt configuration
    • remove unnecessary diversity unless it makes sense
      • is there a good reason to use cssnano instead of postcss-minify?
  • upgrade stylelint etc., test, adapt configuration
  • upgrade eleventy (possible breaking changes from 0.x -> 2.0 !)
• proceed with refactoring
  • check open issues and notes
  • more modular content structure
    • elements copied to _storybook should be components instead
    • tiles (projects / skills) should be components
  • refactor CSS
  • automate extracting critical CSS
  • automate image optimization
• after snapshot testing (codecpt, see Testing Tools: Codecept Front-End Tests #42)
• readability / maintainability / developer experience
  • -> specificity and ordering
  • -> refactor class names (BEM)
• new css features with progressive enhancement (container, parent, aspect-ratio)

see trello card