RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
CSS selector being compared to a set of JS array methods, doing the same thing.
A series of images of an avatar doing a bunch of skateboard tricks.

Collections are coo

Updated 5 min read
cssjs

A fun benefit of always assuming something in your code is an array or collection, is that when its empty, no worries.

.button {}

This is a default feature of CSS. It beautifully handles an empty set of results, iterating over each match when they do arrive. It's rad, and most CSS selectors work under this assumption; selecting collections.

Javascript can do this empty handling too:

let buttons = []
buttons.forEach(item => console.log(item)) 
// no logs

So can JSX, cuz "it's just Javascript" and .map() is an array method like forEach():

{buttons.map(({text}) => (
  <button>{text}</button>
))}
// no <button>'s

And I'm not trying to wage war on if statements, but they stink.

if (buttons) {
  // do stuff
}

Nothing wrong with if statements, you just need to remember to put them in there, they can stack up, nest, and more… or else the dumb computer will try and do an operation on something that doesn't exist.

We can get all existential now, which I do enjoy:

buttons?.text

Anyway…

My brain thinks its fun to think about how similar CSS can be to other languages and where it's got some really killer features. It's currently back on a kick about how nice it is to work with collections.

Collections everywhere #

VisBug works alot this way under the hood, always assuming the user has selected multiple things or the effects of their change have multiple targets. Taught me alot about systems built on arrays.

document
  .querySelectorAll('.button')
  .forEach(item => 
    console.log(item))

I always have a fun time in that codebase, and it's hard to crash VisBug because of it.

Array hayday #

I feel arrays are most popular in RxJS and Functional Programming. It's something I miss about those styles and tools.

Fun fact too, RxJS had SQL alias's so you could use select() instead of map(). Don't get me started on how CSS is like SQL!

But no one really talks about how CSS is like these.
I guess I have before

Is it apples and oranges and I'm trippin? #

Just look at this comparison of CSS and JS, selecting the same things!

.dark .button {}
let buttons = []
let dark_buttons = buttons.filter(button => 
  button.closest('.dark'))

Peep how powerful and succinct CSS is!

.blog > h2 {
  backgroundColor: hsl(200 100% 90%);
  color: hsl(200 82% 15%);
}
import { assignStyle, directDescendants, byAttr } from './utils.js'

blogs
  .flatMap(directDescendants)
  .filter(byAttr('nodeName', 'h2'))
  .forEach(assignStyle({
    backgroundColor: 'hsl(200 100% 90%)',
    color: 'hsl(200 82% 15%)',
  }))

So yeah, even though it wasn't intuitive for me at first, treating more things as collections or observables that yield values over time, I like the resilience of the code. The way it'll be evaluated and decide on its own not to run the loop. The way it doesn't care.

I like it when code doesn't have to care.

Here's a rant I had about it in 2020.

Mentions #

Join the conversation on

45 likes
1 reposts
  • Ст. 122 УК РБ

Member of a CSS Webring

Try a site in the ring!
PreviousRandomNext