Add more dedicated CSS classes to components for easier theming

[Septicity]

Describe the problem

Since custom CSS is in the works, and I find myself likely to contribute themes, I've been looking at the HTML/CSS layout of the app. So far, most of the class names and styles are clearly applied dynamically; this makes custom CSS very difficult to write and even more difficult to read. Some components also don't have any unique class given to them, meaning that styling them will either not be guaranteed to persist across updates or be impossible to isolate onto one type of element.

Describe the solution you'd like

Ideally, the unique features of each element get isolated to a few simple classes:

A sidebar item, currently represented by something like

<div class="Sidebar_SidebarItem__vs60p54 _1mqalmd1 _1mqalmd0 _1bugis91 Sidebar_DropTarget__vs60p53">...

could be simplified into something like

<div class="SidebarItem DropTarget">...

Alternatives considered

Alternatively, if this styling convention is impossible, impractical, or provably inefficient to change so drastically within the Vite framework, then the explicitly-named classes could be given logical names while the formatting-oriented classes remain the same:

<div class="Sidebar_SidebarItem__vs60p54 _1mqalmd1 _1mqalmd0 _1bugis91 Sidebar_DropTarget__vs60p53">...

could be simplified into something like

<div class="SidebarItem DropTarget _1mqalmd1 _1mqalmd0 _1bugis91">...

Additional context

No response