J.R.R. Tolkien famously said that the phrase "cellar door" is aesthetically beautiful. In fact, a lot of people have said that. But those people mostly didn't get to use computers, which is a shame. Because if they had learned to program, they would have seen some stuff that would have blow their minds. Imagine if Tolkien had written some Java for an insurance company instead of writing all those crazy books. That would have been cool.

Anyways,

This is just a silly article cataloging some CSS that I find sort of beautiful. At the end, I'll show you a poem I wrote using these terms. 😮

Sometimes I wonder if we choose different languages or constructs because of their aesthetic appeal more than their theoretical appeal. For example, this is maybe not so sexy:

function hello() {
 ...
 }

But this? Oh baby:

const hello = () => {
 ...
}

This lambda syntax transforms language into a beautiful little picture: () => {}

There are important theoretical differences between the two... but hey, setting that aside, I prefer the second for that reason alone.

Alright let's get to it.

..linear infinite;

Wow. Now this is what I'm talking about. Just contemplate the linear infinite for a second. It's got a sort of cosmic, existential quality. I love it.

In actuality, it's just a snippet of the CSS animation rule, in particular the timing function and iteration count.

justify-self:

Okay this one is almost offensive. You should NEVER have to justify yourself to anyone, let alone your browser's rendering engine. 😤

This is actually just a way to position flex box contents along the box's axis. But still, it's gotta make you defensive when you see it. Am I right?!

Let's take a stand:

justify-self: end;

Much better.

:focus-within

Once again, CSS gives us a blissful phrase. Focus within indeed. Whenever I'm feeling down... when I've forgotten the syntax for transitions or something for the third time in a day, I like to meditate on this pseudo-selector.

Focus within...

Alright, now hit me with that poem

How about this?

i:focus-within {
	justify-self: end;
	transition: height 1s linear infinite;
}

Let us reflect on this for a while...

Goku meditating