4 ms·

Applying CSS using utility classes it just a different way to abuse HTML for the purpose of inline styling. - How do you set a class for states like hover, foc

by err4nt 8y ago

Applying CSS using utility classes it just a different way to abuse HTML for the purpose of inline styling. - How do you set a class for states like hover, focus, active, hidden, checked, etc - How to you use/create/style pseudo-elements? - How do you add responsive control (like CSS media queries)? 'Functional CSS' is like sitting down at a full piano keyboard and trying to bang out a tune by only hitting one key - there's a LOT more range possible in CSS, and it's only difficult mostly because we MAKE it difficult by ignoring this. The only/best 'functional' CSS tooling I would even look at these days is http://css-blocks.com http://css-blocks.com from the people who made Sass, it's a much more modern approach and you end up with highly optimized code, HOWEVER you write human-readable CSS stylesheets and you let the CSS-Blocks compiler and Opticss optimizer output the 'functional css' you need. Let humans do what humans are best at (writing nice stylesheets) and computers do what computers are best at (compiling things). It will outperform and human pretending to be a compiler, and with better accuracy.

criswell 8y ago
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 8y ago
  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 8y ago
    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 8y ago
      > 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/dataset 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-representation https://drafts.csswg.org/selectors-4/#attribute-representati...
      - criswell 8y ago
        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 8y ago
        > 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!

by err4nt 8y ago

criswell 8y ago

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 8y ago
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 8y ago
  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 8y ago
    > 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/dataset 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-representation https://drafts.csswg.org/selectors-4/#attribute-representati...
    - criswell 8y ago
      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 8y ago
        > 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!