[criswell]

This is how you can do all of that:

  class="hover:red" -> .hover\:red:hover { color: red }

  class="before:red" -> .before\:red::before { color: red }

  class="medium:red" -> @media (min-width: 500px) { .medium\:red { color: red }

The important thing though is it doesn't need to be used for everything. I think it makes a lot of sense for structural stuff. When you dig into like, children of a hovered element I can see it getting a little messy.

[err4nt]

How come people who do this only ever use class names? Why not invent your own data attribute like data-hover="red" where you create new namespaces for things like hover, or pseudo classes, why it it always only ever class names?

[criswell]

Totally talking without thinking about it too much here:

The classList API makes modifications to the class property very easily.

You'd be essentially limited to one identifier in attribute selectors. You can't really select from multiple identifiers with a data attribute without doing like:

  [data-hover*="foo"]

which would search for "foo" anywhere in the attribute, which could mean incorrect substring matches.

Chaining attribute selectors would be rough too:

  [data-hover*="foo"][data-hover*="bar"] {}

vs

  .foo.bar {}

[err4nt]

> The classList API makes modifications to the class property very easily.

So does the dataset interface for custom data attributes: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...

> You'd be essentially limited to one identifier in attribute selectors. You can't really select from multiple identifiers with a data attribute…

That's just not true, there's an attribute selector that targets strings in a whitespace separated list: [attr~=value], so you could think of .demo as being a shorthand for [class~="demo"], or #demo as a shorthand for [id="demo"].

  [data-hover~=foo][data-hover~=bar] {}

would target a tag like this:

    <div data-hover="foo bar"></div>

But not a tag like this:

    <div data-hover="foobar"></div>

More info about attribute selectors: https://drafts.csswg.org/selectors-4/#attribute-representati...

[criswell]

I wasn’t aware of the tilde attribute selector. Still a lot more characters, though.

The classList api is still a lot more suited for this than dataset. None of the modifications done through the dataset api would reflect in the DOM and be readable by CSS unless you were to convert the list to a space separated string and explicitly set the attribute. classList handles all of this for you.

[err4nt]

> None of the modifications done through the dataset api would reflect in the DOM and be readable by CSS unless you were to convert the list to a space separated string and explicitly set the attribute.

I'm really not sure what you mean by this. If you set the data attribute any of these ways, it can be targeted in CSS with [data-demo="example"]:

    el.dataset.demo = 'example'
    el.dataset['demo'] = 'example'
    el.setAttribute('demo', 'example')

CSS doesn't require a space separated anything. When you use an attribute selector in CSS it treats the entire value as a string, spaces included. But it's not classes versus attribute selectors, as class is an attribute, and therefore also something you can select with attribute selectors.

Also, think about the asymmetry between CSS and HTML when considering saving characters, one CSS selector targets ∞ tags, so I'd rather write slightly longer selector one time, than need to use a much longer 'namespaced' value on each element where I want the style to apply. That's leveraging what CSS does best!

[criswell]

I'm just saying if you want to target something on an element it needs to be set in an attribute and classList takes care of this.

I use classes strictly for styling. I change these styles by adding and removing class names and classList handles it very well without me needing to read the data attribute, make it an array, manipulate it, join it and update the attribute.