The CSS Art Paradox

Published on Apr 28, 2022 (updated Jul 4, 2022), filed under development, html, css, maintainability, design, art. (Share this post, e.g., on Mastodon.)

This is one of 180 articles that you can also read in an ebook: On Web Development II.

The most sophisticated CSS being applied to the most meaningless, bloated, and unmaintainable HTML; i.e., the best CSS on top of the worst HTML: That is the paradox of CSS art.

xExamples abound when you search for “CSS art.” Take one of the many examples on css-art.com, like the CSS apple—review the CSS in the respective pen but note the “compiled” markup here:

<div class="page">
  <div class="shade"></div>
  <div class="p2822rv"></div>
  <div class="l599e51"></div>
  <div class="ps71z87"></div>
  <div class="t12tali"></div>
  <div class="ceirzn5"></div>
  <div class="o2y113n"></div>
  <div class="x7v5222"></div>
  <div class="zj236i7"></div>
  <div class="light"></div>
  <div class="tgm4e57"></div>
  <div class="tagz83w"></div>
  <div class="skvdej8"></div>
  <div class="green"></div>
  <div class="bx1kjk8"></div>
  <div class="il43qyi"></div>
  <div class="lyrzy76"></div>
  <div class="pl22445"></div>
  <div class="spot"></div>
  <div class="el6n2ea"></div>
  <div class="stmvru9"></div>
  <div class="l3io43b"></div>
  <div class="f7yb6z1"></div>
  <div class="pid71b1"></div>
  <div class="xz8v76a"></div>
  <div class="e225745"></div>
  <div class="saltd54"></div>
  <div class="d647a82"></div>
  <div class="zv75fuq"></div>
  <div class="d43148u"></div>
  <div class="df137vj"></div>
  <div class="f658w41"></div>
  <div class="qh52b36"></div>
  <div class="y29do7c"></div>
  <div class="vlvi791"></div>
  <div class="eg711ml"></div>
  <div class="r9p89ys"></div>
  <div class="a2ktzjo"></div>
  <div class="n4y74ix"></div>
  <div class="lh6o94s"></div>
  <div class="bottom-shadow"></div>
  <div class="bottom-shadow2"></div>
  <div class="leaf"></div>
  <div class="leaf-shadow"></div>
  <div class="leaf-highlight"></div>
  <div class="j86g1kn"></div>
  <div class="ucfi66b"></div>
  <div class="k9w65sk"></div>
  <div class="stem"></div>
  <div class="rs6451i"></div>
  <div class="i2r51mh"></div>
</div>

It may sound harsh, but markup like this is meaningless junk.

(This is not geared towards the artist—their work is respected and appreciated, as their focus has been on the CSS. This example serves to illustrate the HTML downside.)

You can rightly marvel at the CSS that CSS artists write; but shudder when it comes to the markup it’s usually based on.

A paradox, of CSS art.

Are there exceptions? Yes! Single-element artworks are usually an exception. Their small HTML footprint is defensible even if these art pieces have no content (some single-element art is even accessible). Lynn Fisher’s A Single Div offers a great collection of single-element artworks. If you want an example from myself, I submit The World’s Highest Website, a 2006 CSS experiment based entirely on the premise of a single element.

Then, does good CSS art require good HTML? Similar to how a great artwork may need a quality canvas or frame? That’s a great question! Let’s discuss on Twitter.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and engineering manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, Frontend Dogma).

I love trying things—in web development and engineering management, but also in politics and philosophy, where I hold to one idea in particular: that we can only be well if we take good care of everyone. Here on meiert.com I talk about some of my perspectives and experiences. (Interpret charitably but be critical—and share feedback and advice that makes my work better.)