📝 CSS-Tricks 220: The Principle of Least Power

View this newsletter on the web.

Just the other day Kilian Valkohof wrote this great piece about how to create a full-bleed layout effect where an element like an image breaks out from the grid you’ve established.

Kilian shows us how he does that with plain ol’ CSS:

body > *:not(img) { position: relative; max-width: 40rem; margin: auto; } 

The :not pseudo-class above will set the max-width of every element on a page that isn’t an <img> to have a max-width of 40rem. So you get something like this:

This isn’t the only way to create this full-bleed effect where images stretch across the whole page. A while back Josh Comeau wrote about how to create a full-bleed layout using CSS Grid and the whole post is absolutely worth reading.

But! Kilian argues that if the :not selector works, without having to setup a complex Grid solution to this problem then we should use it because his code abides by the principle of least power. Kilian then describes that principle like this:

When I build websites, I try to stick to the principle of least power. This states that you should use the least powerful language that does the job. In other words, don’t go straight for the more complex language (like JS) if a simpler language (like CSS or HTML) can also do the same thing. The simpler language will be more maintainable, more robust and easier to understand.

I think about this all the time, especially when it comes to design systems. Whenever I create a new component or a new design my thinking goes something like this:

  1. Can I use HTML?
  2. If not, can I get away with lightly styling the markup?
  3. Can I change the design to make this easier to implement?
  4. Dangit okay, if I can’t do that then I’ll hand-write some JavaScript to solve this problem.
  5. Eff it—okay, this is annoying—I’ll pull in a third-party library.

It’s all too easy to jump straight to step 5 here and pull in a third party library to solve our problems, or npm install something because we don’t want to have to go through the pain of the trying the first four steps. But with almost every codebase I’ve worked on I’ve found this—the principle of least power—is definitely the right way to approach web development in general.

All of this ties neatly into what Jim Nielsen mentioned just the other day when it comes to cheating entropy with old projects:

HTML, CSS, and JS are, in a semver sense, still at version 1.x. Whatever you wrote in 2018 or 2008 will still work. On the other hand, a project built on abstractions from native web technologies—frameworks, tooling, language sub/supersets—will contain innumerable dependencies with countless major version changes over time. Updating a single dependency often requires updating everything. Building on top of base web technologies, where possible, is a way to cheat the entropy and churn of modern web technology abstractions.

All that can be summed up like this: the principle of least power is progressive enhancement.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s