CSS, My Oh My

Is it a language? A layout tool? An animation engine? Yes.

The current CSS logo

I love CSS.

I’ve found a bit of a niche in being an HTML/CSS layout specialist, and I really enjoy the puzzle-solving nature of figuring out how to implement responsive columns, variable colors, styling for different display languages (I’ll retroactively link this one once its done, it’s currently stuck in domain registrar transfer hell for the next few days). I say this ahead releasing of a few project I’m working on that are pure HTML/CSS/JS, and I’ve personally been loving foregoing frameworks for getting into the nitty-gritty of scripting, formatting, and styling. That being said, there’s a laundry list of frameworks I do need stronger footing in (*cough* React *cough*) but, for fun’s sake, I’m sticking to my very basic .html and .css guns for a bit.

Now: in this week’s microblog (I love this term, and the last one did abnormally well for a listicle and a pseudo-academic blurb) we’ll be talking about how neat CSS is and looking at a few fun examples I’ve been learning from the last few weeks.

Without further ado, CSS!

What isn’t there to say about it? If HTML is the pie dough, CSS is the caramelized filling and the intricate basket weave baked into a brilliant golden brown atop.

You know a comparison is a good one when you have to pull out a picture reference for it to make sense.

It’s often what makes a site really pop, what with an endless catalog of design and formatting options to let developers round their edges and softly fill their linear gradients to their hearts’ content. My first real introduction to web development was in p5.js (my beloved), an incredible JavaScript-based tool that effectively leverages the HTML Canvas to build anything from primitive-based smiley faces to working, if not performant, implementations of Craig Reynolds’ Boids algorithm.

Boids, which is, in a thick Brooklyn accent, to say: birds. A mathematical approximation of how birds behave in flight.

Building things in p5 pretty regularly necessitates only JavaScript, with minimal HTML and, extremely rarely, some CSS formatting for DOM elements.

I mention this because, coming from p5, CSS kinda feels like… cheating? It’s cascading layout is extremely easy to write, pretty intuitive to understand, and is easy to get into the rhythm of when you’re really comfortable hopping between files for small tweaks. It also makes a ton of web interactions an absolute breeze: on-hover (or, if you’re on a phone, on touch) interactions are as easy as adding a single line of code, and it boasts and entire animation and keyframing engine for building anything from rotating logos to a Sisyphean loading screen loop.

All of this with nary a single line of JavaScript.

I’d even argue CSS alone is a great reason to try your hand at web dev just to get a feel for how fun it can be animating and building interactive elements. I was recently introduced to the term “Microinteractions”, which definitely warrants its own blog, but, to be as reductive as possible: Microinteraction is an entire field related to leveraging things like CSS into subtle, logical quality-of-life improvements, from the faux-tactile feel of a responsive digital button to use cases for animated radial background elements. Truly, something that warrants its own field is well worth looking into!

And that’s that.

That wraps up our second microblog! I recall last week being excited to unveil my latest projects, and rest assured, those announcements are still coming (along with a heaping handful of interactive web experiences and a full game (or, at least, the audio I built for it). Enjoy your microread, and remember to microsubscribe for more microtakes!