Skip to content

Disallow deeply nested CSS selectors #30485

Open
@delvh

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    topic/uiChange the appearance of the Gitea UItype/proposalThe new feature has not been accepted yet but needs to be discussed first.type/refactoringExisting code has been cleaned up. There should be no new functionality.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions