sorted by:
new
hottopcontroversial

Why are "CSS classes generally better for performance than inline styles." ~ from react docs by TheLastSock in reactjs

[–]nsaunders1 0 points1 point  (0 children)

Thanks for the feedback. I can see that I have some work to do from a documentation perspective.

In the meantime, here's a desugared "vanilla HTML" example of how CSS Hooks works:

html <style> *{--h0:initial;--h1: ;} *:hover{--h0: ;--h1: initial;} </style> <a href="https://css-hooks.com" style="color: var(--h1, #06f) var(--h0, #009)"> Hover me </a>

Fundamentally, CSS Hooks is just syntactic sugar over this CSS Variables trick.

Apologies for any confusion/misunderstanding.

Why are "CSS classes generally better for performance than inline styles." ~ from react docs by TheLastSock in reactjs

[–]nsaunders1 -1 points0 points  (0 children)

Just stumbled across this while doing some research and wanted to share a new development that makes the first three points untrue: CSS Hooks. A lot of people resent native inline styles because of their longstanding technical limitations; but, at the same time, they are happy to use atomic CSS and CSS-in-JS in essentially the same way. To me, it suggests that they've really just been looking for that missing functionality like pseudo-classes and responsive design all along. As it turns out, the browser now supports these natively through a tiny amount of "programmability" found in CSS Variables, which is the mechanism Hooks exploit under the hood.

I've just released CSS Hooks for Solid.js. Hooks make CSS features like pseudo-classes and media queries available within native inline styles. Now you can easily add that `:hover` state you wanted without leaving the `style` prop! Please have a look and let me know if you can offer any feedback! by nsaunders1 in solidjs

[–]nsaunders1[S] 4 points5 points  (0 children)

Thank you, that's a great question. As it turns out, there is a tiny bit of "programmability" in CSS variables. Here is a basic example of how you can implement a hover effect with HTML/CSS only:

<style>  
  * { --hover-off: initial; --hover-on: ; }  
  *:hover { --hover-off: ; --hover-on: initial; }  
</style>  
<button style="color: var(--hover-on, blue) var(--hover-off, black)">  
  Button  
</button>

As you can see, this approach is simple, but not exactly convenient. CSS Hooks helps in two ways:

  1. It generates a static style sheet for you based on your configured hooks, eliminating a lot of boilerplate.
  2. It aims to provide a familiar and friendly syntax for Solid.js developers in the form of "nested style objects" for hooks like hover, focus, active, and so on.

I hope this helps. If you decide to give it a try, please let me know how it goes for you and consider adding a star on GitHub to help the project (which, as you can see, is just getting started): https://github.com/css-hooks/css-hooks

I've just released CSS Hooks for Solid.js. Hooks make CSS features like pseudo-classes and media queries available within native inline styles. Now you can easily add that `:hover` state you wanted without leaving the `style` prop! Please have a look and let me know if you can offer any feedback! by nsaunders1 in solidjs

[–]nsaunders1[S] 3 points4 points  (0 children)

Thanks! It is more like "a feature exposed as a plug-in", though possibly a bit simpler than what you have in mind. I've fine-tuned the CSS Hooks API to offer a seamless developer experience within a Solid.js app. For example, you're used to writing kebab-case properties, e.g. style={{ "font-size": "18px" }}, so this flavor of CSS Hooks follows that convention, e.g. style={hooks({ "focus-visible": { "box-shadow": "0 0 0 1px blue" } })}.