[serverholic]

If you're using react or another frontend framework then you really don't need css selectors. Just make plain css classes and dynamically append them to your components. So much simpler.

We do this at my current job and it's honestly the easiest time I've ever had with CSS.

[extra88]

How do you solve the kind of problem the article is describing? How do you have a margin on the bottom of every <Card> except the last one? Is there a loop for cards with a conditional that doesn't add the margin? I think the declarative language solution they offer is better.

[serverholic]

Yeah just use the index of the card. For example:

cards.map((card, i) => {

  const isLast = i === cards.length - 1

  const className = "card" + isLast ? '' : 'card-margin'

  return <Card className={className}  />

)}

The nice thing about this is you have a full programming language at your fingertips. You could do something with every even card, ever prime number card, etc.

[extra88]

Just because you can do everything in JavaScript doesn't mean you should. The equivalent CSS is a lot shorter and more performant.

> every prime number card

You got me, CSS alone can't select only primes.

[serverholic]

The performance difference is negligible. If you add a new card to the list then react is going to add/remove a couple CSS classes. Completely negligible.

Plus you're going to need this approach anyway if you want to do any more advanced logic like maybe you have a list of users and you want to color them based on some status.

With this method you have the above logic all in one place and in one language. After having used traditional CSS with selectors vs this method I really can't go back.

[extra88]

You may need the .map() for styling based on status but

  const isLast = i === cards.length - 1
  const className = "card" + isLast ? '' : 'card-margin'

Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening.

> all in one place and in one language

That seems like the real reason, keeping to one language.

I think following the rule of least power [0], having HTML semantics do what it's good at, CSS what its good at, and JavaScript for the rest is best for robust and performant outcomes.

  <Card className={className}  />

I only have a little experience with React and that was a while ago, can you not have the Card typed as an Element to use `Card.classList.add(className)`?

[0] https://en.wikipedia.org/wiki/Rule_of_least_power

[mst]

> Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening.

When you're doing a side effect free transform of some data, I find .map far clearer.

A for loop would require .push type noise for that case and so personally I'd find that noisier and harder to skim read.

Tastes vary, of course, but certainly it doesn't seem funny to me at all.

[11235813213455]

you're missing parens: "card" + (isLast ? '' : 'card-margin') // ternary has a very low precedence https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

or `card ${isLast ? '' : 'card-margin'}`