[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.