CSS is a Declarative, Domain-Specific Programming Language

Over the past year, I’ve been giving a talk called The Algorithms of CSS, originally created for CSSConf EU. This post covers the first part of my presentation, and breaks down how CSS fits into the categories of programming languages.

A grey, bording CSS transforming into a blue, exciting CSS

Over the past year, I’ve been giving a talk called The Algorithms of CSS, originally created for CSSConf EU (you can watch the video and see resources here). The talk is gradually evolving, and I want to get this information out of a video-only medium before it’s changes too much in the presentation.

I proposed The Algorithms of CSS as a challenge for myself to “bridge the gap between CSS and computer science”. At the time, I had been studying traditional CS, sorting algorithms and the like for an interview, and was feeling bored and frustrated when I went back to writing my previously beloved CSS in my day-to-day work with agencies.

I expected the contents of the talk to be a deep-dive into a few algorithms in browsers’ rendering engines, things like CSS Grid auto placement or the layout of flex items, but it ended up being much more than that.

Once I set out on a mission to connect the two, it was like web developer enlightenment. I was like “Holy f&*#, CSS is computer science!!! It’s all the same!!” 🤯

A simple, grey written representation morphing into an exciting, blue, emphasized written CSS

After learned what CSS actually is and what it does, my experience writing CSS went from dull and grey, to challenging and exciting, as it had been before I’d taken a leap into learning the classic computer science stuff…except more like 10x more exciting because now I could see what was happening beneath the surface of my CSS and it’s so freaking cool.

Is CSS a programming language?

I started my research with an investigation into the bizarre results of a Twitter poll where I posed the question “Is CSS a programming language?”.

As you can see above, the results to that poll were incredibly distributed, and the responses varied from “Of course!” and “Absolutely” to “Well…writing CSS isn’t really programming” and “No, way”.

Now, let’s be very clear: Twitter polls are a terrible way to obtain conclusive data. In no way, shape or form, are my Twitter followers representative of the web developer population at large, and this poll only had 129 respondents!

Note: A year after this post, I re-ran this poll and received ~5,200 responses with the same result.

That being said…the results were so evenly split, it prompted me to further investigate. Before we evaluate whether or not CSS is a programming language, however, let’s swallow our assumptions and opinions and ask, what is a programming language?

What is a programming language?

When researching this topic, one will find a variety of answers and opinions. In conversations I’ve had, it seems like many folks have their own, personal definitions for what constitutes a PL (a common abbreviation for programming language). It’s weirdly subjective.

To synthesize the most objective definitions I’ve read, however, the definition of a programming language can be boiled down to:

A language of instructions for a computer.

Paraphrasing Wikipedia and others

Programming is the act of writing instructions for a computer to solve a problem and, as a result, the computer solving that problem. A programming language is the language used to write those instructions.

Is that it?

Well, there’s a heck of a lot more nuance to it than that, and an entire branch of computer science called programming language theory that deals with this exact topic, but for our purposes, yes, that’s it.

There’s a lot to be gained from keeping the definition clear and inclusive. Will Crichton, a PhD student at Standford, outlines a really nice, open definition here in more detail and concludes with this sentiment:

Broadening our perspective on what is a programming language allows us to consider how we can apply lessons from PL design to many different application areas.

[and]

A liberal definition encourages programming language research to diversify; expanding the set of topics considered legitimate PL research could spark greater cross-pollination with related academic communities.

Paraphrasing Will Crichton

Also on this topic, there’s an absolutely wonderful talk by a computer science researcher named Felienne that I’ve shared before, called What is programming, anyway? That talk has been very inspirational for me, and I highly suggest you watch it, too.

Programming Paradigms: Declarative vs. Imperative

Okay, now that we have a general definition as our baseline, let’s get a bit more detailed.

There are different types of programming languages, and they are categorized by way of programming paradigms. The paradigms can be used in a literal sense to describe the features of a given programming language, but they can also be used to describe styles of programming. In this case, we are talking about features of languages.

The primary, top-level programming paradigms are declarative and imperative.

Implicit vs. Explicit Control Flow

The distinguishing factor between imperative and declarative languages is the absence or presence of explicit control flow. Control flow refers to the ability to directly manipulate the order of execution of statements in a program. In imperative languages, this control flow is explicit through the use of language features like if/then statements, for loops, functions and variables.

In declarative languages the control flow is implicit. Generally speaking, the computer will read the program statements from top to bottom, and any control flow happens under the surface, and is implied in the statements of a declarative language.

Imperative and Declarative Languages

Imperative languages are what we usually think of when we think of programming and programming languages: JavaScript, Python, C++, Ruby, etc. are all imperative languages. Imperative languages are usually general purpose programming languages, meaning they can be used to program pretty much anything for a wide variety of platforms.

Declarative languages, on the other hand, are most often domain-specific languages, or DSLs, meaning they were developed to used for a specific purpose, within a specific domain. You can probably where this is going…

What are some examples of declarative languages? Well, for one, we have SQL, a declarative DSL for working with databases. Then, we have our beloved…HTML! Yes, HTML is a DSL for adding meaning to content on a webpage. And of course, CSS. CSS is a DSL for programming the layout of webpages.

So, there you have it: CSS is a domain-specific, declarative programming language. Keith Grant writes about the paradigm of CSS beautifully.

What does that make CSS developers? Well, CSS developers program the layout of webpages, or, phrased another way, CSS developers are programmers of boxes…webpage layout boils down to boxes, after all!

Why not?

15 years ago, CSS would still be a programming language according the liberal definition laid out here, and now, in 2018, it’s a programming language according to other definitions, too. In it’s current implementation, CSS/HTML is Turing complete, CSS has functions and variables, CSS has math. And it’s only getting more powerful!

If we set aside the politics of software development, why wouldn’t CSS (and HTML for that matter) be considered a programming language?

If you don’t want to believe me for some reason, listen to this friendly computer scientist clarify for you.

P.S. The video of my CSSConf EU talk and links to my research are here. I’m planning to follow up this post with others, but that might take a while!


One response to “CSS is a Declarative, Domain-Specific Programming Language”

  1. Just wanted to say a big THANK YOU!

    Your talk was eye-opening for me. Not only made me change camps in the “is CSS a programming language?” discussion, but also allowed me to think my CSS in more of an algorithmic approach, which has proven to be great to solve layouts in the most efficient way. Great stuff!