Why Native CSS Variables Will Be A Good Addition

Posted: 30 Jan 2014 05:30 AM PST

On Monday I walked through css custom properties for cascading variables and mentioned that some people have objections to variables becoming part of the css language. Two notable objectors are Jeremy Keith and Chris Coyier.

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

Before the holidays both made arguments against adding variables directly to css. I’d like to cover their objects and then talk about why I disagree and think css variables will be a good addition to the language.

The arguments come down to 2 things. First is to question whether variables are necessary in css given that we have variables in css preprocessors. The idea being that we shouldn’t automatically add this abstraction layer, just because it enables us to abstract our code more. The second is that they would make css more difficult for beginners to learn.

Here are Jeremy’s and Chris’ articles. They’ll do a better job explaining their objections than I ever will.

Are CSS Variables Needed?

In some respects I have a hard time understanding how this could be a question. If they aren’t necessary in css then by the same logic once variables were part of Less they weren’t necessary in Sass. However I don’t think that’s what Jeremy or Chris is really saying.

While it’s true that variables exist in preprocessors there’s at least one thing they can’t do in a preprocessor that they would be able to do natively in css and that’s interact with Javascript.

Javascript never sees preprocessed variables. It only sees the resulting processed output. I think being able to read and directly manipulate variables opens up interesting use cases. This alone makes it worthwhile to add variables to css.

CSS is Easy to Learn

The main argument though, is that adding variables to css will make the language more difficult to learn. One major benefit of css is how easy it is for people to pick up and get started. This ease of entry is part of the beauty of the language.

CSS syntax is simple.

1 2	selector {property: value;} h1 {font-size: 2.5em;}

It doesn’t take long to understand what’s happening in the code above or to write similar code on your own. Combine the basic syntax with how to connect css with html and you’re good to go.

Variables in css will make programming languages more approachable and not make css less approachable

CSS is also very modular as none of the pieces above rely on anything else in the stylesheet. It’s all right there in place. Adding variables would break this modularity as the values of the variables would be located in one place and the code to style a selector in another.

Both Jeremy and Chris acknowledge that css animations already break this modularity as they require separate blocks of code for declaring and invoking the animation. Both think it’s probably the only way to make animations work.

I’d say the precedent has been set.

Do read both of their articles as I’m sure I’m not doing justice to their arguments. I think their point is ultimately that adding variables turns css into something more of a programming language than a markup language and that’s more difficult for people to learn and use.

CSS Will Still be Easy to Learn

Not too long ago I was reading Dan Cederholm’s new book Using Sass. Aside from it being a good book, I’m mentioning it here because Dan points out how easy Sass is to learn, especially if you’re using the .scss syntax.

That syntax is the same as css so you can write your first .scss document the same way you would write any css document. Just change the file extension from .css to .scss and add some css code to the file and you’re officially writing Sass. It doesn’t get much easier than that.

From there you can take advantage of the features of Sass one at a time. You can start by nesting your code. Your next step will probably be to work with variables. When you’re ready you can make use of mixins, extensions, and partials. You don’t have to use these or any other features until you’re ready.

The point being it’s very easy to get started with Sass. If you tried to start with the more advanced features it would probably be confusing, but you don’t have to start with them. You never even have to use them to make Sass useful. Nesting and variables alone make Sass worthwhile.

CSS can work the same way even if you add variables and other programming logic to the language. They wouldn’t be necessary for working with css, but they’d be there if and when you wanted them to be there.

You’d still start by learning the basic selector {property: value} syntax and how you connect css to html. Once you understand both you understand how css works. You’re hardly an expert at this point. Your next steps with the language will likely be memorizing properties and values until you realize you don’t need to memorize either and instead find resources to look them up.

Then you might work to better understand all the different selectors available to you, starting with ids and classes before moving on to attribute selectors, combinators, and pseudo selectors. At some point you’ll want to understand why one selector takes a property another can’t. You’ll seek to understand default values. Somewhere along the way specificity and cascading rules become important to learn.

And then there’s how things work in combination to build layouts. What are the pros and cons to each layout approach? Should you use floats or positioned elements? What are these css table things?

Eventually you’ll become interested in how your css files and the code in them are organized. Are you writing efficient code? Is your style consistent? Can others quickly understand what you’ve done and maintain your code?

Yes, the very basics of css are easy to learn and understand, which makes the language approachable, but let’s not kid ourselves into thinking it’s all easy.

There’s a lot to know about css. It’s an easy language for beginners to learn because you don’t need to know advanced topics of the language to use it. If you understand how to get an html file to read css and understand the basic syntax you’re good to go. How does adding variables to the mix change that? They’d just be one more to thing to learn when you’re ready.

I’ll go further and suggest adding loops and conditionals and other features of programming languages would be no different. They’d be there when you need or want them, but wouldn’t be required to use the language. I’d be happy to see anything in preprocessors added directly to css itself. As long as these more advanced concepts aren’t requirements to working with css, the language will continue to be approachable and easy to learn.

Why Programming Languages are Harder to Learn

Programming languages are more difficult to learn not because they include more advanced topics, but because the basics are difficult the first time you encounter them. Installing the language is enough to scare off some people.

True programming languages have steeper learning curves. The learning curve can be as steep as you want further down the line. The beginning is what makes a language approachable or not.

Variables are typically among the first topics discussed in any programming language suggesting they’re one of the easier things to understand about programming. We all learned how variables work early on in school when we took algebra and started substituting x, y, and z for real numbers.

If anything, I think adding variables to css will only make programming languages more approachable and not make css less approachable. Learning css would be the shallow part of the curve to learning the more advanced language.

Summary

Variables are coming to css. We won’t be using them tomorrow, but we will be sometime over the next few years. A few years ago that would have made designers and developers very happy. Today some people have objections to variables being native to css.

I understand the objections. We already have the ability to work with variables and variables are more complicated than the basic css syntax. They probably aren’t the first things people new to the language should learn.

So what. Nearly everything we do with css in real projects is more complicated than the basic syntax. Adding a more advanced feature to the language doesn’t make the basic language any more difficult to learn. If anything it’ll make programming languages easier to learn as css will shallow out their curve.

There are also some use cases for having variables directly in css mainly because it would allow Javascript to read and write to those variables. Javascript can’t read and write to preprocessed variables. It only reads the post-processed css.

What do you think? Are variables in preprocessors enough? Will variables in css make css more difficult to learn? You know where I stand. What about you?

Download a free sample from my book Design Fundamentals.

The post Why Native CSS Variables Will Be A Good Addition appeared first on Vanseo Design.