Why the new class attributes?

[Florinstruct]

I couldnt find any reasoning on why the new class attribute was introduced (other than 'useful if you’re using Tailwind').
The class attributes are

1. More code
2. Less readable
3. A syntax that is unlike any other we use in Svelte markup

Am I missing something?

[brunnerh]

It also allows passing conditional classes through component boundaries, in the same vein that now you no longer need a bunch of on:event to forward events. class:name had similar composability issues.

There are other CSS utility libraries that are not Tailwind which benefit from this as well.

[Florinstruct]

I would strongly discourage passing CSS classes to components in the first place. In this case, you pass a state (active: boolean), and the component decides what to do with that - could result in a class, an attribute, or conditional rendering. Decoupling.

[brunnerh]

This is just an example. You would only really use this for well-defined classes from a utility library/something like Tailwind.

The whole point is that the component does not need to decide anything about this and just forwards it to an internal element. This is not passing state in general, just a collection of classes.

[webJose]

Bootstrap provides utility classes for borders, margins and the like. I am working on a Bootstrap component library and this feature is just beautiful. We can, without investing extra, allow components to be adjusted at will with said utlity classes via the component boundary.

For example, imagine a complex navbar that sometimes doesn't show a particular button that needs to be pushed to the right with the utility class 'ms-auto'. When the conditional says it cannot be shown, then the next one needs to be pushed with 'ms-auto'.

{#if someCondition}
  <Button class="ms-auto" ...>...</Button>
{/if}
<Button class={{ 'ms-auto': !someCondition }} ...>...</Button>

The second button takes the role of pushing the "rest of the navbar contents" whenever the conditioned button is not rendered very easily.

There are other uses cases.

[Florinstruct]

@webJose Your example is just doing the same with another CSS framework. I'd honestly never approve of code like that in a PR for the reasons mentioned above.

So bottom line is, we're sacrificing readability and KISS for some external libraries that only some people use. And we're making it mandatory instead of opt in. That is really bad.

[webJose]

Of course you are free to think any way you want. I'll just say this: There's a reason why clsx is so popular. Even before this change, and because I like to code things myself (and therefore did not know clsx existed), I had my own version that did the exact same thing. If you ever get why people like it so much, I guess you'll understand the decision of including it.

In short: We love our classes perfectly calculated, with a perfectly built string, without worrying about falsy values.