-
“Where should I define custom properties?” a thread: html/svg - if you want to *inherit* the value globally - great for site-wide defaults and constants :root - if you don’t know the root element, or it could change - sound unlikely? yeah, you don’t need it muchPermalink On twitter.com
♻️ 5 Retweets ❤️ 19 Favorites Mood +4 🙂
-
local selector - if it’s only needed in a particular context - if you are using calc or fallback values that will change contextually - custom properties only update their value when applied directly - great for componentsPermalink On twitter.com
-
* (universal selector) - you need it globally, but also: - it needs to change contextually, or - the value should not inheritOn twitter.com
-
nowhere: - there are many good reasons to call variables without defining them initially - Provide a default as the fallback value, and you can override with the variable later as-needed - Don’t provide a fallback, and the value will remain unset until you define it in contextPermalink On twitter.com