I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

Algorithms in CSS

I am likely going to write a “CSS for JavaScripters” book, and therefore I need to figure out how to explain CSS to JavaScripters. This series of article snippets are a sort of try-out — pre-drafts I’d like to get feedback on in order to figure out if I’m on the right track.

Today we’ll discuss the writing of CSS algorithms, inspired by Lara Schenck’s excellent article on that topic, which states that not only CSS is a programming language, but you can write algorithms in it.

What follows are my words; not hers — I have different points to make, and give different examples. If you want to hear Lara’s own words on CSS algorithms, drop by at CSS Day, 13th and 14th of June, Amsterdam, where she will speak.

I'm writing a CSS book.

CSS as a programming language

Is CSS a programming language? That's a hard question. In a Twitter poll I conducted in February 2019, 47% of the 3,000 or so participants said that CSS is a prorgamming language, while 53% said it is not.

So there’s no agreement on this — it all depends on your definition of a programming language. If a programming language must be imperative, then no, CSS isn't. If a programming language is anything that gives computers instructions to do anything, then yes, CSS is.

But there’s a more important question: does it matter? Does the fact that CSS is, or is not, a programming language make it easier for you to learn? Let’s discuss CSS algorithm design, which presupposes CSS is in fact a programming language, and see if it helps.

Algorithms in CSS

Saying you write algorithms in CSS is a psychological trick that can put you, and, more importantly, your co-workers, in the right frame of mind for approaching tricky CSS problems.

You should think before you start coding; that’s just as true in CSS as it is in JavaScript. If, for instance, you need a certain layout it is worthwhile to make a quick sketch and decide on your overall approach. Will you use grid, flexbox, floats, or even absolute positioning? (The last two options are not really recommended, by the way.) Will you mix approaches; for instance grid for the overall layout, but flexbox for the naviation bar?

Thinking about these issues before you start coding will save you a lot of work in the long run, just like thinking about the structure of your JavaScript app before you write it helps you create it more quickly.

Now if you slap the name “algorithm design” on this process you achieve several goals. You are able to explain to programmers why you’re doodling boxes in boxes while making cryptic notes about grid gaps and flex bases. You invite those that are new to CSS to share your exploration of a layout problem, and can quickly introduce them to the pros and cons of grids and flexbox. (And remember: the best way to really learn something is to explain it to someone else.)

Naming things

Most importantly, naming things gives you power over them: if a bunch of disconnected doodles and notes become an algorithm design, you grant them the much higher status of a computer problem. And engineers exist to solve tricky computer problems, don’t they? Here, let me show you why I think flexbox is the right approach in this situation ... and before you know it your co-workers will become as engrossed as you are in the details of this exciting new algorithm.

Once the doodling-and-thinking phase that we now call algorithm design is over, you should whip up some proof-of-concept code (it’s OK if it’s ugly), show that your approach will work (or that it won’t, which is also useful data), then test your ugly code in several contexts, and finally iterate until the code is cleaner and more understandable to others.

You’re doing just the same as when you would write a tricky JavaScript module, in other words. Go from design via prototyping and testing to optimsation — and the fact that you use a different programming language doesn’t matter. Meanwhile the magic word “algorithm” will make sure that everyone understands you’re doing some real programming here.

Cool, huh? The power names have!

I'm writing a CSS book.