DJ Quilter

Front-End Developer

Helpful Variables For Your CSS

CSS variables (by which I mean the variables which preprocessors give us) are great. When you need to make a change, you can make it once rather than 100 times. Variable make sure your values are consistent through your stylesheet. And, for me, variable names can often be more memorable, so you don’t have to go routing through code to find some very specific value.

When people talk about variables in their SASS/LESS architectures, I find a lot of people talk about colours, which is great (obviously), but I’ve found lots more than that which can help your development process. These are some of the common ones which I have been using on all of my most recent projects.

Font Sizes and Families

Setting a base font in your variables alongside the various sizes (for body copy, headings etc) solves the nefarious problem of a multitude of random font sizes appearing throughout your site. I like to try and nail down these sizes early doors by speaking nicely to designers about what they had in mind.

Font families are equally useful. I don’t want to be searching for the right fallbacks for a particular type of heading when I can just drop in my variable.

@bodyFont: 'Arial', non-serif;
@headingFont: 'Times New Roman', serif;

@baseFontSize: 16px;
@bodyCopy: 1em;
@headingOne: 3em;
@headingTwo: 2em;

Z-Index

Z-indexes can be a massive pain. If you’re doing anything vaguely complicated with your z-index you can quickly get yourself in a mess. So, add them to your variables file!

Obviously this will vary from project to project, but at the very least I’d think about something like to following:

@rearZindex: -100;
@frontZindex: 100;
@massiveZindex: 10000;

Notice the massive numbers; don’t increment your z-index in 1s. This has nothing to do with using variables, it just good practise. If you put more digits into your z-index states, you’re less likely to break something (which I have done, many times).

Breakpoints

If you have a specific file for each of your media queries, this is probably not useful. Otherwise, I tend to set up my breakpoint values something like this:

@tablet: 728px;
@mobile: 480px;
@smallMobile: 320px;

Background-size for Retina Sprites

So you’re using sprites? And you’re making sure they look great on retina by using background size? But you’ve only just started developing the site? Set background size in your variables file. That way, when you (inevitably) have to update the background size of your sprites file, you can do it in your variables file.

Summing Up

I’m sure there are other good ones out there, but these are the ones that I’ve recently found most useful to me. If you have any good ones, leave them in the comments!