Content suggestion: Sort CSS Properties by category in the sidebar

[schockocraft]

What is the new suggestion?

I suggest to sort the properties list in the Sidebar for CSS pages by categories. That allows both looking for a property that one forgot the exact name of, if you still know what it's for, and to get thematically close suggestions for related pages, as in the old sidebar, as the category the current page is in would be extended automatically, once #5547 is fixed/implemented.

The categories in which the properties would be sorted in could be simply taken from the CSS Modules list, as the pages there seem ideal as categories for the Reference>Properties list especially considering that they actually contain indexes of properties already. (Example 1)

It is also worth thinking about merging the Module, Property, and At-rules lists, as they would all share the same categories. (Example 2)
In my Opinion this sorting method is vastly superior over Example 1, though i can see it being a bit less easily assessable - but still way better then the current sorting.

Also the Section the current page is in (Learn CSS/Reference/Guides/etc.) to be situated above all other sections, as the sections above do potentially move the automatically extended Reference>Properties>Category list off the screen otherwise.

Further, are the pages in "Learn CSS" and "Layout Cookbook" not guides aswell? Both of these should be parts of the Guides section, and the whole Guides section needs to be categorized aswell, as currently there are many lists - some of which only contain one page - that should be part of other lists in there instead.

If you don't want to merge the Step-ordered Learn CSS and the alphabetically ordered Guides, at least make the Three types of Guide Lists sublists of one Guide Category. (Example 3)
If done so, the Alphabetical index could be its own page aswell, instead of further bloating the sidebar.

Other Parts of this sidebar are also Sorted Weirdly, and Pseudo-classes and Pseudo-elements are selectors aswell, and should be subcategories of the Selectors list.

Why is it important or useful?

Currently the Sidebar for CSS pages is a huge chunk of bloated lists, some of which are too long to be comfortably scrolled through when looking for something specific. The Reference>Properties list is the worst offender, and it is a chore to find the page you are looking for there, especially if you forgot what a property was called exactly.

I actually forgot that the list was way more useful before, until i found mdn/content#3827 while looking for already existing duplicates to this suggestion. while i agree that the new sidebar has a better and more consistent style it also removed much of the ease of use and/or helpfulness, as now everything is thrown together in one huge list. Also it is now elementarily different to the sidebars for both Javascript (example) and HTML (example) that both still have the actually related links still directly accessible.

Will the work enable learners or professionals to achieve their goals better?

Yes, having the main element for navigation better structured and more easily assessable can only be good for everyone using it.

Other supporting information

Remotely similar issue to #3812

Example 1

• Related Topics
  • Reference
    • Modules
      • CSS Animations
      • CSS Backgrounds and Borders
      • ...
    • Properties
      • Animations
        • animation
        • animation-delay
        • animation-direction
        • animation-duration
        • animation-fill-mode
        • animation-iteration-count
        • animation-name
        • animation-play-state
        • animation-timeline
        • animation-timing-function
      • Backgrounds and Borders
        • background
        • background-attachment
        • background-clip
        • background-color
        • background-image
        • background-origin
        • background-position
        • background-position-x
        • background-position-y
        • background-repeat
        • background-size
        • border
        • border-bottom
        • border-bottom-color
        • border-bottom-left-radius
        • border-bottom-right-radius
        • border-bottom-style
        • border-bottom-width
        • border-collapse
        • border-color
        • border-image
        • border-image-outset
        • border-image-repeat
        • border-image-slice
        • border-image-source
        • border-image-width
        • border-left
        • border-left-color
        • border-left-style
        • border-left-width
        • border-radius
        • border-right
        • border-right-color
        • border-right-style
        • border-right-width
        • border-style
        • border-top
        • border-top-color
        • border-top-left-radius
        • border-top-right-radius
        • border-top-style
        • border-top-width
        • border-width
        • box-shadow
      • ...

Example 2

• Related Topics
  • Reference
    • Animations
      • CSS Animations Module
      • Properties
        • animation
        • animation-delay
        • animation-direction
        • animation-duration
        • animation-fill-mode
        • animation-iteration-count
        • animation-name
        • animation-play-state
        • animation-timeline
        • animation-timing-function
      • At-rules
        • @Keyframes
        • @scroll-timeline
    • Backgrounds and Borders
      • CSS Backgrounds and Borders Module
      • Properties
        • background
        • background-attachment
        • background-clip
        • background-color
        • background-image
        • background-origin
        • background-position
        • background-position-x
        • background-position-y
        • background-repeat
        • background-size
        • border
        • border-bottom
        • border-bottom-color
        • border-bottom-left-radius
        • border-bottom-right-radius
        • border-bottom-style
        • border-bottom-width
        • border-collapse
        • border-color
        • border-image
        • border-image-outset
        • border-image-repeat
        • border-image-slice
        • border-image-source
        • border-image-width
        • border-left
        • border-left-color
        • border-left-style
        • border-left-width
        • border-radius
        • border-right
        • border-right-color
        • border-right-style
        • border-right-width
        • border-style
        • border-top
        • border-top-color
        • border-top-left-radius
        • border-top-right-radius
        • border-top-style
        • border-top-width
        • border-width
        • box-shadow
    • ...

Example 3

• Related Topics
  • Reference
    • ...
  • Guides
    • Learn CSS
      • ...
    • Layout Cookbook
      • ...
    • Alphabetical Index
      • ...

[caugner]

Since this suggestions, two notable changes have been made to the sidebar:

1. The CSS properties are now grouped by common prefixes (feat(macros/CSSRef): group CSS properties by common prefix #7441).
2. Sidebars can now be filtered (feat(sidebar): add filter #8968).

Admittedly, these changes don't resolve the mentioned problem of finding related CSS properties, but I would question whether the sidebar is the right place to solve this problem.

As an alternative, I could imagine to have a box at the bottom of a CSS property page with a list of all CSS properties belonging to the same module, similar to how the Wikipedia shows "Related articles":

[Rumyra]

Thanks for the suggestion @schockocraft - due to the improvements to the CSS sidebar I'm going to close this issue 👍