Disallow deeply nested CSS selectors

[delvh]

At the moment, CSS selectors are extremely deeply nested from time to time, sometimes with one selector taking up to a full line on a large monitor. With such deeply nested selectors, it becomes really hard to trace which selectors will apply for any given element as tracing the information which parent elements exist is only known by the browser and in rare cases developers Furthermore, they are hard to maintain as changing any parent element may cause unintended regressions.

The reason why these selectors are so deeply nested is to remove accidental matches. Yet, there is another way, apart from using deeply nested selectors: Going the tailwindcss way:

When a selector becomes too complicated, add a new style class instead so that the selector only uses a single element. In the best case, we would get rid of nesting completely. However, since that is unreasonable for Gitea to achieve at once, I suggest first setting a rather lax value for stylelint/selector-max-combinators such as 3 or even higher, and then dropping this value over time until no more nested selectors are left.

Furthermore, we can only achieve this once all Fomantic CSS has been removed and inlined into our own code, as Fomantic uses such complicated selectors heavily. As such, there is a hard dependency on its removal before this issue can be tackled.

[silverwind]

The reason of current deep selectors is because previous Less nesting made it easy and it was very much abused. This is also one reason why I like to avoid native CSS nesting.

I imagine 90% of the deep CSS selectors will work just fine if we remove most of the parents in the selectors, but each change needs to be tested of course.