Tech Debt: Clean up CSS
Currently our CSS is a bit all over the place, bad practices are used and some things have so many nested styles refactoring or modifying it is very hard.
My thoughts on some things that could/should be improved:
- Clean up bad practices, like using flex over float
- Simplify complex nesting of styles
- Avoid inheriting too many styles from other components (Keep common sense with you: using generic styles like .panel, .panel-heading from app.scss is completely fine, but user-card-content being affected by what happens in user-card is not so fine)
- More clear class naming (status.vue has some very bad examples of this)
OTHER DEVELOPERS: please comment your thoughts on what sort of CSS you think would be optimal for this project and why. Keeping factors in mind such as needing to support the theming engine, readability/maintainability, ease of working.
Any work for this issue should be done in reasonably sized chunks when possible, having merge requests that span the entire application is not preferable. It's also very important to keep an eye on regressions.