The CSS Art Paradox
Published on April 28, 2022 (↻ July 4, 2022), filed under Development and Design (RSS feed for all categories).
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.
Examples 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 it on Twitter.
About Me
I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m somewhat close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.
I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
If you’d like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!
Read More
Maybe of interest to you, too:
- Next: Two Approaches to Accessibility on the Web
- Previous: 3 Books for Working With Reality
- More under Development or Design
- More from 2022
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.