Proposal: Standardize use of CSS variables #52505
Description
Summary
I think the repo should begin using CSS variables (i.e var(--primary)) as a standard and routine practice, particularly for the use of brand and other utility colors found in _variables_project.scss. The current SCSS variables can serve as a source of truth for CSS ones.
Rationale
Since the repo is already using SCSS variables from Docsy, this isn't really an added layer of complexity, it's a continuation of the current approach being applied to the CSS files as it already is in the SCSS ones.
We all know the general principle that you wouldn't rewrite the same code everywhere with the expectation you might need to change each instance manually, you write a helper function or something to
- write once,
- use everywhere,
- change once,
- update everywhere.
If any of the brand or other utility colors ever change, simply updating the variable's value once will cascade throughout the entire site, as opposed to needing to manually replace each hardcoded value on every file which becomes its own technical debt for any site-wide changes.
The variable names might even be easier to remember, but if you don't, then you're stuck flipping back to a reference style guideline somewhere like you would with a hex value anyway.
Extent of Use
I don't think it should be enforced to where it constrains creative freedom like needing to apply certain variables for margins or padding values on all pages. The focus is foundational use cases: we shouldn’t see boilerplate hex values for brand colors like #326ce5 (blue) scattered everywhere.
If someone does a PR using hardcoded values instead of variables and it gets approved, it's not that big a deal, just a little more technical debt in case that value needs to be changed later manually. But as a foundation to build on, it does strengthen the continuity of the repo and affords much more granular control.
Any thoughts or different perspectives on the matter?