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
is0
. 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:
- Yes, if it’s CSS art, then code quality is secondary and probably doesn’t matter.
- CSS art, as code, should still be held to a standard, reviewed, and optimized.
- 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 fivediv
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 views and experiences. (Be critical, interpret charitably, and send feedback.)
Read More
Maybe of interest to you, too:
- Next: 26 Additional Web Development Terms You May Not Have Heard Of
- Previous: 2022
- More under Development or Design
- More from 2023
- 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.