Variables should be set on the container element and inherited down. They shouldn't be set on every single element like: https://searchfox.org/wubkat/rev/12cb9f518180ff4a469eff2481efdf907e4cf63c/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css#38-44 Rules like these are error prone, because overriding them from different CSS files might not work as expected. See for instance: https://searchfox.org/wubkat/rev/12cb9f518180ff4a469eff2481efdf907e4cf63c/Source/WebCore/Modules/modern-media-controls/controls/vision-media-controls.css#34-41 which needs to do `.media-controls.vision *`. If someone writes a new rule and forgets the `*` or misses an element where the variable is used, this can cause issues with the variable having the wrong value.
<rdar://problem/111819735>