DEV Community

Discussion on: Cool CSS tips And Tricks

Collapse
 
kalashin1 profile image
Kinanee Samson

Yes, it ensures that all elements share that rule as their default, it works well especially if you want to really control the element and its spacing...

Collapse
 
afif profile image
Temani Afif

all elements share that rule as their default --> CSS variables are by default inherited so defining them inside :root or * will give you the same result. This said I am against both configuration (the :root and *) because it's a very bad practise we see in all the courses/tutorial. CSS variables should be defined based on your use case. If you have to define a color that will get used everywhere then do it inside :root but if you will define a variable that will get used by one or two elements then define it only for them using a specific class. All the elements don't have to inherit all the variables