We just merged a large change in Mastodon's UI, upgrading the icons from FontAwesome to Material Icons, and switching from loading them as a font to inline SVGs.
This is probably a large change for people maintaining alternative themes, please send your feedback if it makes things easier or harder for you! (cc @nileane / @rolle)
@renchap I'd REALLY like to completely refactor everything under app/javascript/styles as SCSS and CSS are something I do for a living. However, I have too much things on my plate right now so it would be impossible. But I can help any way I can in between, like in form of this discussion, perhaps PRs, testing and such.
I don't see it as a bad idea to start changing it to more CSS-friendly approach while still retaining a structure of a maintainable SCSS framework. After all, more maintainable, better (S)CSS structure in Mastodon core is a great ground for themers like me to work with. I'd be happy to refactor #MastodonBirdUI to work with the new Mastodon core theme.
I would start by adding stylelint tools for CSS and SCSS (at least stylelint-config-standard, stylelint-config-standard-scss), here's a .stylelintrc I myself use: https://github.com/digitoimistodude/devpackages/blob/master/.stylelintrc - I would change it to more strict, and keep it like 2-3 levels nesting max.
Every single thing should be added to a CSS variable, colors, font-families, font-sizes, breakpoints, background-images, border-radiuses, form factors, aspect-ratios, hovers, active states, UI states, etc. so they can be worked and manipulated with on the theme side.
After this, I'd refactor each file line after line and move every bit as smaller components under their respective directories. I would follow a back end structure there, for example: