Is CSS a Programming Language?


Is CSS a Programming Language?

Had you asked the web development community five years ago if CSS was a programming language, they would have said no. If you had asked them two years ago, they would have also said no still. If you asked them today, they would probably still say no... but some may add a little asterisk beside their answer.

By definition, a programming language "can be used to create programs that implement specific algorithms." CSS wasn't made to do that. It was meant to style HTML elements. HTML organizes and displays content, CSS styles it and JavaScript manipulates it. Those are their roles and one shouldn't mix their purposes.

In the perfect world, sure, but in this world we have those those handy little conditional comments in HTML, which operate as "if statements". We also have JavaScript's ability to manipulate HTML's styles. These two alone show that the lines between HTML, CSS and JavaScript are becoming more and more blurred everyday.

But still, CSS isn't a programming language. It needs to be able to "implement specific algorithms" to do that, and it can't.

Or can it?

Calc()

CSS's calc() can implement and solve algorithms. By passing values into it, it can then spit out an answer. For example:

We can complicate it a bit further too:

I know what you're thinking. Just because CSS can do basic math problems now does not make it a programming language. Programming languages have "variables" in it to pass and manipulate data. CSS doesn't have that.

But it does have something similar:

Custom Properties

"Custom properties" are very limited CSS variables. They can change value and thus change the styles of elements. You can either set them on the :root of the document or on the element in question. They then cascade down into children elements, like this:

The syntax is a little odd, but the variable is defined with a --name, followed by a value. To reference it you place it inside a var() attribute. You can also provide alternatives values if the value hasn't been set. To do this, add the alternative value after the variable inside the var() attribute like so:

You can also store multiple properties inside a CSS variable, like so:

Okay, so you can use variables and do math. That isn't exactly "programming". Programming also includes "if statements". Does CSS have those now too?

Kinda...

@supports

Does your browser support some modern styles like flexbox? Or did you want to add custom styles like Webkit's stroke? CSS's @supports can now style elements according to your browser's support:

However, if a browser doesn't support @supports, it also doesn't support @supports not. This means @supports is not a good way to style around older browsers like Internet Explorer. (But there are other ways to do that.)

Okay, so now we have math, variables and somewhat of an "if statement". What about loops? CSS does not have that.

You're right, it doesn't have it, yet. But with a little JavaScript magic it does:

CSS Animations

CSS animations, theoretically, loop. We can set them to loop once, twice, ten times or infinitly. We can't do math inside CSS animations when the loops complete, but we can add an event handler in JavaScript and then watch for it and apply a change. We will want to use "animationiteration" not "animationend", since the animation isn't technically "ending".

Conclusion

To call CSS a programming language would be incorrect, but it would also be incorrect to say it isn't. CSS has made leaps and bounds over the past few years and is moving in the way of programming languages. With the recent addition of CSS variables / custom properties, a lot more possibilities have opened up.

While looping in CSS is so far limited to having to include JavaScript, pre-processors like SASS and LESS have mastered those years ago. That difference between pre-processors and vanilla CSS separates them and keeps them alive. Once CSS can hobble that hurdle, however, pre-processors may be a thing of the past. While CSS isn't a programming language yet, it will be soon.

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close