Remove style-specific components

[okdistribute]

The style of creating helper components such as Unselectable and Centered will cause bloat over time and unnecessary nested divs which make it more difficult to test and navigate through the DOM hierarchy.

For example, in this section, we might want to create instead a single component called Window and include the unselectable and centered style properties in that component as simply css.

https://github.com/deltachat/deltachat-desktop/blob/master/src/renderer/components/SplittedChatListAndView.js#L159-L161

This does create css redundancy across different components but this is a tradeoff of abstraction. When creating an abstraction, we need to ask ourselves if the abstraction is more or just as much code as simply copying the css? If so, the abstraction is not worth it and can cause more confusion for how nested css properties are interacting with each other within a component.

In this case, the window class has no "window" (no pun intended) to see that it is also affected by Unselectable and Centered.

[Jikstra]

Two ideas:

1. use global css classes like .centered or .unclickable and just add them to the component <SomeStyledComponent className="centered unclickable">...</...> Cons, a preprocessor would be maybe worth it if we're using global css helpers.
2. Use extending of styles https://www.styled-components.com/docs/basics#extending-styles. Cons: It's only possible extend from one element.

I would go for 1.

[okdistribute]

I don't think you need these classes at all.

[okdistribute]

i.e., just use pure css for centering an item and making something unclickable (it's like, 3 lines of code or less).

[Simon-Laux]

I vote for the classes instead of components

[okdistribute]

Yeah, you can think of components like css ids, they should only be used once or a few times, when a div would be used anyway, and when there is a lot of custom css for that particular component. It really isn't meant to be a replacement for generic css classes, or to wrap basic css like 'unselectable' which is only a couple lines of code and won't be changing