[csswg-drafts] Making design system first-class citizens (#9999)

Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:

== Making design system first-class citizens ==
As @LeaVerou mentioned in #9992 and its more verbose [explainer](https://lea.verou.me/docs/var-groups/#design-systems-syntax), there is some potential value in making [design systems](http://en.wikipedia.org/wiki/Design_system) a first-class citizen in the web ecosystem:
I’d like to start tracking this idea here, although I’m not sure yet how this would look exactly – I’m afraid the understanding of what a design system actually is and which features it would require that CSS doesn’t already provide may differ considerably. Lea states this at least:
> This would involve standardizing a dedicated syntax and naming scheme (…) for design tokens,  
> and providing authors with a whole different syntax for passing design tokens around.

The main purpose of a design system is to make projects more maintainable. One way they achieve this is by limiting the implementation choices authors have. For some CSS properties it’s a bit like only using keywords even though exact values were available, except that with a design system the meaning of these keywords would be selected and centrally set by the local designers instead of W3C. Custom Properties are not really doing the same because they can be locally overwritten at all times. (In #6099 I tossed around an idea how to introduce “External Properties” into `var()` that couldn’t be overwritten as easily.)

Design systems usually also build more complex structures from lower-level tokens, down to atomic-level. 
When the assembling of those primary design choices happens on the markup side, this is strongly related to [utility classes](https://design-system.w3.org/styles/utilities.html) which have a single small presentational purpose. (In https://github.com/w3c/csswg-drafts/issues/3714#issuecomment-1407783568 I suggested a way to do them better in CSS.)
They often follow a systematic nomenclature similar to the global variables that spawned #9992.

Beyond basic design choices like color palettes, fonts or breakpoints, design systems cover higher-level elements like styles, components, patterns, layouts and templates. At least the latter seem out of scope for CSS, but it governs the rest in one way or the other.

The normal cascade of CSS does not seem to play well with usual design systems. That’Í probably one of the reasons why the Cascade module is being patched to support other ways, more being proposed (e.g. #5629 and #9350). Although design systems do consider and employ inheritance, my overall feeling is they’d prefer an opt-in model.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9999 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 26 February 2024 09:30:13 UTC