[page types] Define page types for CSS

[wbamberg]

Part of #15539.

In https://docs.google.com/spreadsheets/d/14RX8EEKPpeYkP2cF5Y_ZKF3JpNJ_24OL7stvZWNJLIY/edit#gid=2083448819, in the "CSS" tab, I've listed every page under https://developer.mozilla.org/en-US/docs/Web/CSS and made an initial determination about the page type.

I've tried to err towards too many page types than too few, since it's easy to amalgamate them but harder to divide them.

I've come up with 16 types:

CSS at-rule              16
CSS at-rule descriptor   27
CSS combinator            4
CSS function             74
CSS keyword               8
CSS media feature        39
CSS module               45
CSS property            378
CSS pseudo-class         81
CSS pseudo-element       40
CSS recipe               12
CSS shorthand property   59
CSS type                 37
Guide                   113
Landing page             10
tool                      4

...plus two pages that I wasn't able to categorize:
https://developer.mozilla.org/en-US/docs/web/css/color_value/hexadecimal_rgb
https://developer.mozilla.org/en-US/docs/web/css/color_value/system_color_keywords

• I think there's room to argue about whether we could amalgamate some of these. For example, pseudo-elements and pseudo-classes are selectors AFAIK. On the other hand we do currently distinguish them in the sidebar.
• I have split out "CSS recipe" from "Guide" because the recipes have a particular structure. But practically, it's probably not worth differentiating them at this point.
• I have sprinkled a few question marks through, for things I wasn't sure about.

[estelle]

Selectors

CSS selector would encompass:

• combinator
• pseudo-class
• pseudo-element
• selectors (which are not in the list above but are in the spread sheet).

In the sidebar, I would include "selectors" on all CSS pages, and then include the 3 subgroupings on every combinator, pseudoclass, and pseudo element page. We could divide them further (attribute selectors, structural selectors), but I think that should be on the main "selectors" page and not in the side bar. This is pretty much how it is now.

Properties

Shorthand properties are properties; not sure if we want an additional section in those for "long hand members of this short hand property", but I don't think we need to call them out as such in a sidebar.

Guides

There are two articles that are fundamental to understanding CSS. Well, maybe more. But specificity and the cascade aren't "guides" like the other guides where you're learning how to use a CSS feature; maybe put those two in "selectors and the cascade" in addition to or instead of guides

Other thoughts

The miscellaneous page should be removed.
Layout cookbook and tools should be only one line on the sidebar, except on individual tool and cookbook pages.

[wbamberg]

Thanks Estelle!

This isn't just (or even mostly) for sidebars: it's also, for example, to define the things that different pages must or may contain. So for example, shorthand properties should (probably) have their own type because we want these pages to have a "Constituent properties" section.

But of course the page types should be able to support the sidebar. At the moment we distinguish selectors, pseudo-classes, and pseudo-elements in the sidebar.

There are two articles that are fundamental to understanding CSS. Well, maybe more. But specificity and the cascade aren't "guides" like the other guides where you're learning how to use a CSS feature; maybe put those two in "selectors and the cascade" in addition to or instead of guides

I don't think this should be visible as a different page type. A guide page is really just any page that doesn't have any particular structure.

[teoli2003]

https://developer.mozilla.org/en-US/docs/web/css/color_value/hexadecimal_rgb

This can be a CSS function

https://developer.mozilla.org/en-US/docs/web/css/color_value/system_color_keywords

This is a collection of CSS keywords.

I wonder if we should merge CSS function / CSS keyword and these 2 pages (there is another one I think, I don't have right now) in one single page type.

[wbamberg]

https://developer.mozilla.org/en-US/docs/web/css/color_value/hexadecimal_rgb

This can be a CSS function

Could it be a <hex-color> type? https://drafts.csswg.org/css-color/#typedef-hex-color

https://developer.mozilla.org/en-US/docs/web/css/color_value/system_color_keywords

This is a collection of CSS keywords.

I wonder if we should merge CSS function / CSS keyword and these 2 pages (there is another one I think, I don't have right now) in one single page type.

Is there any reason this couldn't be made into a <system-color> CSS type page? We don't have one of these (although the spec lists it in the syntax for <color>: https://drafts.csswg.org/css-color/#typedef-color.

Similarly I thought we could make https://developer.mozilla.org/en-US/docs/web/css/color_value/color_keywords into a <named-color> type.

(In a sense of course many CSS types are "a collection of keywords", like https://developer.mozilla.org/en-US/docs/web/css/blend-mode for instance. It's an enumerated type.)

[teoli2003]

I've tried to avoid types that are used only once, but I will try to see how it works in these cases.

[wbamberg]

Another reason for wanting to do this is: with the new formal syntax macro, we'll get something like this for <color> types:

I would like <hex-color>, <named-color> and <system-color> to link to a useful page :). Currently it seems like we hack this in the macro, but I'd prefer not to do this, as I think it is rather fragile.

[teoli2003]

Yes, let's do this.

[teoli2003]

I've moved the hexadecimal value page to <hex-color>, let's review it, then I'll do something similar to create <named-color> and <system-color> (we already have separate pages for these, too).

[wbamberg]

Having thought about this a bit I think we can go with the set of page types in the original comment: #15540 (comment), with the exception of "CSS recipe" which I think we should treat as a guide for now.

[wbamberg]

I think this is done :).