DEV Community

Discussion on: CSS variables: What are they and how to use them

View post
Collapse
 
prakhart111 profile image
Prakhar Tandon •

Hey John,
Want to add a few points on CSS variables.

  • It is recommended to add a fallback condition in case of inability to access the variable, CSS will use that fallback item. 
.myClass {
  background-color: var(--bg-color , black)
  color: var(--text-color , white)
}
Enter fullscreen mode Exit fullscreen mode

The values after the comma, represent fallback values.

  • CSS variables are inherited and are also available in any of that selector's decedent.

A variable declared in :root , means it's in the root element ( think it as html tag )
Hence it is accessible globally.

And yes, on dev, to get such colourful code, just use "js" after first commas

Cheers !

Collapse
 
johnpalmgren profile image
John Palmgren •

Thanks for your comment. Some great points ❤