It’s been almost two years since Algorithms of CSS v1. I had plans to present CSS Algorithms 4.0, “We Are Programmers” this summer at Front-end United, but summer plans are canceled. This post has been sitting in my drafts for almost six months.
So, what about CSS algorithms now, after time has passed and I have more experience? CSS algorithms both as a concept, and as a tangible development practice where a directory of algorithms exists in a CSS code-base – how’s that going?
I have no interest in writing that post at the moment, and I still need to finish writing up the talk as blog posts, so you’ll have to hang tight.
What is a CSS algorithm?
In my talk, I started with the definition:
A CSS algorithm is a well-defined declarations or set of declarations that produces a specific styling output.
But that’s wrong. Outdated. Scrap it.
This reads like a CSS algorithm is only declarations, but so much power in CSS is in the selector – a CSS algorithm can for sure include any type of selector in addition to declarations, and in fact, that is where, computationally speaking, CSS is super powerful (for example, Rule 110, here).
So, if a CSS algorithm includes selector(s) and the declaration(s), then we have a rule-set. We could update this definition to:
A CSS algorithm is a well-defined rule-set, or group of related rule-sets, that produces a specific styling output.
Hmm…this definition also seems wrong. CSS algorithms can just be the declaration, and while it may be best practice to keep them up in their own rule-sets for easy re-use and extensibility, that’s an implementation detail. For example, you may use any of these centering CSS algorithms as part of a rule-set that contains other styling.
How about this, then:
A CSS algorithm is a well-defined pattern of CSS selectors and/or declarations that produces a specific styling output.
But…isn’t that just CSS?
Well, yes, that’s exactly the point – we are programmers, and we write algorithms in CSS.
A CSS algorithm doesn’t indicate anything about the CSS other than that you used an algorithm – you can have a steaming pile of smelly CSS and there can be CSS algorithms interwoven with the smells, just like you can have a steaming pile of any language that contains algorithms woven into the smells.
On the opposite end of that spectrum, you could have classes named according to the algorithm (e.g. a-crop, a-glue, a-pull which is how we do it at PMC), or you have have Sass mixins containing the algorithm, or you could have a set of utility classes that compose the algorithm. Those are the implementation details – the algorithm is a separate concept.
So, yes, all of that…but…
I think there is another quality to a CSS algorithm. A CSS algorithm is a celebration of CSS as a language. It’s CSS written with care and specific intent, with the goal of accomplishing a very specific styling task, embracing the declarative paradigm rather that brute forcing a way around it.
A CSS algorithm is CSS that embraces browser algorithms. It’s a bit of CSS that is concise and expressive, where you’re like, “Woahhh…that’s it?! Hot damn, CSS!!!!”. And you marvel at all of the work you do not have to do.