Declarative design

I feel like in the past few years there’s been a number of web design approaches that share a similar mindset. Intrinsic web design by Jen; Every Layout by Andy and Heydon; Utopia by Trys and James.

To some extent, their strengths lie in technological advances in CSS: flexbox, grid, calc, and so on. But more importantly, they share an approach. They all focus on creating the right inputs rather than trying to control every possible output. Leave the final calculations for those outputs to the browser—that’s what computers are good at.

As Andy puts it:

Be the browser’s mentor, not its micromanager.

Reflecting on Utopia’s approach, Jim Nielsen wrote:

We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?

In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.

Declarative! Maybe that’s the word I’ve been looking for to describe the commonalities between Utopia, Every Layout, and intrinsic web design.

So if declarative design is a thing, does that also mean imperative design is also a thing? And what might the tools and technologies for imperative design look like?

I think that Tailwind might be a good example of an imperative design tool. It’s only about the specific outputs. Systematic thinking is actively discouraged; instead you say exactly what you want the final pixels on the screen to be.

I’m not saying that declarative tools—like Utopia—are right and that imperative tools—like Tailwind—are wrong. As always, it depends. In this case, it depends on the mindset you have.

If you agree with this statement, you should probably use an imperative design tool:

CSS is broken and I want my tools to work around the way CSS has been designed.

But if you agree with this statement, you should probably use a declarative design tool:

CSS is awesome and I want my tools to amplify the way that CSS had been designed.

If you agree with the first statement but you then try using a declarative tool like Utopia or Every Layout, you will probably have a bad time. You’ll probably hate it. You may declare the tool to be “bad”.

Likewise if you agree with the second statement but you then try using an imperative tool like Tailwind, you will probably have a bad time. You’ll probably hate it. You may declare the tool to be “bad”.

It all depends on whether the philosophy behind the tool matches your own philosophy. If those philosophies match up, then using the tool will be productive and that tool will act as an amplifier—a bicycle for the mind. But if the philosophy of the tool doesn’t match your own philosophy, then you will be fighting the tool at every step—it will slow you down.

Knowing that this spectrum exists between declarative tools and imperative tools can help you when you’re evaluating technology. You can assess whether a web design tool is being marketed on the premise that CSS is broken or on the premise that CSS is awesome.

I wonder whether your path into web design and development might also factor into which end of the spectrum you’d identify with. Like, if your background is in declarative languages like HTML and CSS, maybe intrisic web design really resonates. But if your background is in imperative languages like JavaScript, perhaps Tailwind makes more sense to you.

Again, there’s no right or wrong here. This is about matching the right tool to the right mindset.

Personally, the declarative design approach fits me like a glove. It feels like it’s in the tradition of John’s A Dao Of Web Design or Ethan’s Responsive Web Design—ways of working with the grain of the web.

Have you published a response to this? :

Responses

Matthias Ott

“Personally, the declarative design approach fits me like a glove. It feels like it’s in the tradition of John’s A Dao Of Web Design or Ethan’s Responsive Web Design—ways of working with the grain of the web.” 👏💯 Brilliant post by @adactio: adactio.com/journal/18982

Gunnar Bittersmann

Declarative design: @adactio smart as ever on web design approaches sharing a similar mindset: “all focus on creating the right inputs rather than trying to control every possible output. Leave the final calculations for those outputs to the browser.” adactio.com/journal/18982

Ollie Boermans

I enjoy reading Jeremy’s blog posts. The words in my mind are read in his voice, like a written podcast.

bkardell

I kind of love the tone and thoughtfulness of this piece @adactio wrote. It would’ve been very easy to present this very differently, I think. Weird kind of compliment, maybe, I just don’t see it a lot and really appreciated it. adactio.com/journal/18982

# Posted by bkardell on Friday, April 15th, 2022 at 3:21pm

Joshua Iz

I would argue that Tailwind is not purely imperative and more of a hybrid. There is a lot going on in the guts of Tailwind that is declarative (which you can customize) but it ends up being used in an imperative way.

# Posted by Joshua Iz on Friday, April 15th, 2022 at 3:41pm

Sara Soueidan

Declarative design approaches “all focus on creating the right inputs rather than trying to control every possible output. Leave the final calculations for those outputs to the browser—that’s what computers are good at.” — ⁦@adactio#CSS adactio.com/journal/18982

toheeb

Why you may prefer a tool over another 👇 “if the philosophy of the tool doesn’t match your own philosophy” - @adactio Your, or the tool’s, philosophy can be either • declarative or • imperative. adactio.com/journal/18982

# Posted by toheeb on Monday, May 16th, 2022 at 5:36pm

Keeth@ゆめみ⚡️コーチング

今朝読んだ2つ目の記事はこちら(=゚ω゚)ノ 配信中にも言及しましたが,ツールが悪いわけではなく(悪いツールもあるけど…w),使う側の使い方や導入すると意思決定したケースがアンマッチングだったりするだけだよなーと. 宣言型と命令形は改めて考えてみる. adactio.com/journal/18982

Previously on this day

7 years ago I wrote 100 words 023

Day twenty three.

14 years ago I wrote Jelly Bed

Things that are rolled.

18 years ago I wrote Laughing stock

Here’s a cautionary tale about the dangers of over-reliance on stock photography:

19 years ago I wrote Dongle-cosy

I’m the luckiest geek alive.

20 years ago I wrote The Hole In The Wall

Linux Journal has an absolutely fascinating article about an experiment known as "The Hole in The Wall".

20 years ago I wrote Andyco.com : : We're Everything to Everybody

Andyco is a frighteningly good parody of a corporate website.

20 years ago I wrote Hoopla

I’m completely outraged by the theft of hoopla.com. Apparently, all you need to do is send a fake fax to Network Solutions to have ownership of a domain transfered over to you.