CSS Variables Are Really Really Bad... Really?

Jul 15 2016

Ok, by this point you may realize that I actually think CSS variables are useful. Now I have the daunting task of convincing you that there are valid reasons to support variables and that doesn't include turning CSS into a programming language.

I first want to clear up the difference between parameters and variables. A parameter is passed along with the request for a CSS file and can subsequently be referenced using the $_GET array (assuming you are using PHP). Variables are defined either in the CSS file or pulled in from the PHP environment variables. CSS files could potentially behave differently based on a value within a user's $_SESSION. This is a bad idea, and I will explain a little later.

In my dynamic CSS library, parameters become variables within the CSS file. The subtle difference has to do with browser caching. This is a common argument against using CSS variables since the browser has no knowledge of a variable's value and may return a cached version of the CSS file where the values were different than they are now. By using parameters, the values are part of the request itself and caching includes them. In other words:


returns a different browser cached version than: 



even though the css file (myfile.css) is the same. This is because the browser is smart enough to include the passed parameters when caching files. This answers the reason why you shouldn't use $_SESSION variables directly in your CSS file to control the output of your CSS since the browser does not take them into consideration when caching. How could it? The session is managed on the server while the browser is on your local client (PC, Mac, Iphone, ...).



I hope you found this website useful.

Get Connected