Challenge Yourself, Even When It’s Art

Published on January 10, 2023 (↻ May 9, 2024), filed under Development and Design (RSS feed for all categories).

Art is great, when craft triggers emotion and our sense for aesthetics is stimulated to connect with the force of life. You don’t want to read me go on about art, probably (though if you do, here are some old articles that will change your mind), so let’s talk about HTML, and CSS, and both being used for art.

What could go wrong? This is a chapter from my latest book, Upgrade Your HTML IV.

<div>
  <div class="one" style="left: 0; top: 0; background: linear-gradient(90deg, #2b2a27, #453f04);"></div>
  <div class="one" style="left: 50vw; top: 0; background: linear-gradient(90deg, #2b2a27, #453f04);"></div>
  <div class="one" style="left: 0vw; top: 50vh; background: linear-gradient(90deg, #453f04, #2b2a27);"></div>
  <div class="one" style="left: 50vw; top: 50vh; background: linear-gradient(90deg, #453f04, #2b2a27);"></div>
</div>
<div class="two_cont">
  <div class="two" style="left: 10vw; top: 10vh;"></div>
  <div class="two" style="left: 20vw; top: 10vh;"></div>
  <div class="two" style="left: 30vw; top: 10vh;"></div>
  <div class="two" style="left: 40vw; top: 10vh;"></div>
  <div class="two" style="left: 50vw; top: 10vh;"></div>
  <div class="two" style="left: 60vw; top: 10vh;"></div>
  <div class="two" style="left: 70vw; top: 10vh;"></div>
  <div class="two" style="left: 80vw; top: 10vh;"></div>
  <div class="two" style="left: 90vw; top: 10vh;"></div>
  <div class="two" style="left: 10vw; top: 37vh;"></div>
  <div class="two" style="left: 20vw; top: 37vh;"></div>
  <div class="two" style="left: 30vw; top: 37vh;"></div>
  <div class="two" style="left: 40vw; top: 37vh;"></div>
  <div class="two" style="left: 50vw; top: 37vh;"></div>
  <div class="two" style="left: 60vw; top: 37vh;"></div>
  <div class="two" style="left: 70vw; top: 37vh;"></div>
  <div class="two" style="left: 80vw; top: 37vh;"></div>
  <div class="two" style="left: 90vw; top: 37vh;"></div>
  <div class="two" style="left: 10vw; top: 64vh;"></div>
  <div class="two" style="left: 20vw; top: 64vh;"></div>
  <div class="two" style="left: 30vw; top: 64vh;"></div>
  <div class="two" style="left: 40vw; top: 64vh;"></div>
  <div class="two" style="left: 50vw; top: 64vh;"></div>
  <div class="two" style="left: 60vw; top: 64vh;"></div>
  <div class="two" style="left: 70vw; top: 64vh;"></div>
  <div class="two" style="left: 80vw; top: 64vh;"></div>
  <div class="two" style="left: 90vw; top: 64vh;"></div>
  <div class="two" style="left: 10vw; top: 90vh;"></div>
  <div class="two" style="left: 20vw; top: 90vh;"></div>
  <div class="two" style="left: 30vw; top: 90vh;"></div>
  <div class="two" style="left: 40vw; top: 90vh;"></div>
  <div class="two" style="left: 50vw; top: 90vh;"></div>
  <div class="two" style="left: 60vw; top: 90vh;"></div>
  <div class="two" style="left: 70vw; top: 90vh;"></div>
  <div class="two" style="left: 80vw; top: 90vh;"></div>
  <div class="two" style="left: 90vw; top: 90vh;"></div>
</div>
<div class="three_cont">
  <div class="three" style="left: 10vw; top: 10vh;"></div>
  <div class="three" style="left: 20vw; top: 10vh;"></div>
  <div class="three" style="left: 30vw; top: 10vh;"></div>
  <div class="three" style="left: 40vw; top: 10vh;"></div>
  <div class="three" style="left: 50vw; top: 10vh;"></div>
  <div class="three" style="left: 60vw; top: 10vh;"></div>
  <div class="three" style="left: 70vw; top: 10vh;"></div>
  <div class="three" style="left: 80vw; top: 10vh;"></div>
  <div class="three" style="left: 90vw; top: 10vh;"></div>
  <div class="three" style="left: 10vw; top: 37vh;"></div>
  <div class="three" style="left: 20vw; top: 37vh;"></div>
  <div class="three" style="left: 30vw; top: 37vh;"></div>
  <div class="three" style="left: 40vw; top: 37vh;"></div>
  <div class="three" style="left: 50vw; top: 37vh;"></div>
  <div class="three" style="left: 60vw; top: 37vh;"></div>
  <div class="three" style="left: 70vw; top: 37vh;"></div>
  <div class="three" style="left: 80vw; top: 37vh;"></div>
  <div class="three" style="left: 90vw; top: 37vh;"></div>
  <div class="three" style="left: 10vw; top: 64vh;"></div>
  <div class="three" style="left: 20vw; top: 64vh;"></div>
  <div class="three" style="left: 30vw; top: 64vh;"></div>
  <div class="three" style="left: 40vw; top: 64vh;"></div>
  <div class="three" style="left: 50vw; top: 64vh;"></div>
  <div class="three" style="left: 60vw; top: 64vh;"></div>
  <div class="three" style="left: 70vw; top: 64vh;"></div>
  <div class="three" style="left: 80vw; top: 64vh;"></div>
  <div class="three" style="left: 90vw; top: 64vh;"></div>
  <div class="three" style="left: 10vw; top: 90vh;"></div>
  <div class="three" style="left: 20vw; top: 90vh;"></div>
  <div class="three" style="left: 30vw; top: 90vh;"></div>
  <div class="three" style="left: 40vw; top: 90vh;"></div>
  <div class="three" style="left: 50vw; top: 90vh;"></div>
  <div class="three" style="left: 60vw; top: 90vh;"></div>
  <div class="three" style="left: 70vw; top: 90vh;"></div>
  <div class="three" style="left: 80vw; top: 90vh;"></div>
  <div class="three" style="left: 90vw; top: 90vh;"></div>
</div>

Did you catch it? Line 4 [which is numbered in the book] uses a unit even though the value for left is 0. In all other cases, the author had removed the unit. (Interesting article, on this note, which appeared right around the time of writing of this chapter: Not All Zeros Are Equal.)

What is going on here, and what can we do about code like this?

The example is… art. CSS art. CSS art, you can say (I do say), comes with a paradox:

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.

This paradox seems to assume the artist has a free pass for the quality of their code. Or does it?

I believe there are three possible answers to this:

1. Yes, if it’s CSS art, then code quality is secondary and probably doesn’t matter.
2. CSS art, as code, should still be held to a standard, reviewed, and optimized.
3. No, artistic freedom should be limited to one dimension or language, i.e., to CSS; the HTML code should be of high quality, preferably consisting of only one element.

(What do you think? Do you see more options? Let me know or tag me if you write about it somewhere!)

Personally, I can respect and work with all three responses. I prefer, however, if people challenge themselves, if they’re ambitious, if they don’t just go the easy route. As such, I like single-element art that works with minimal, neatly ordered CSS the most.

How would we optimize the code according to the three responses?

With 1., we can stop right here, and not even bother about that odd 0vw. Artistic freedom.

With 2., we would clean up. I wouldn’t challenge the need for all elements here—maybe they’re not all needed, but let’s assume so—, but I would challenge the need for the class names as well as the style attributes. For both, use context, and work through the list with, for example, adjacent sibling selectors or child-indexed pseudo-classes. I’d garnish the parent element with an ID (this book series is a safe space for IDs). And yes, this has been a bad case of divitis, so here, let’s only list up to five div child elements:

<div id=art-challenge>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- … -->
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- … -->
  </div>
</div>

For 3., that’s easy:

<div id=art-challenge></div>

—but it may also make it impossible to achieve the desired effect.

Artists themselves can do our field a favor and set expectations: Do they take all freedom and don’t care about quality? Do they aim for reasonably optimized code? Or do they set the highest bar possible for themselves, and leave a minimal HTML footprint?

The paradox of CSS art doesn’t need to be mysterious: Challenge yourself, even when it’s art.

Thank you for reading. If you’ve liked this, check out the book; if you’ve loved this, check out the series (Amazon, Apple Books, Kobo, Google Play Books, Leanpub). Enjoy!

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 a contributor to several web standards, 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 experiences and views. (Please be critical, interpret charitably, and give feedback.)