CSS Hooks

@sebastienlorber Inline styles are the best option for most of your apps

First @CSSHooks debunked some deeply-held assumptions about the functional limitations of inline styles. And now @danimal_channel challenges the widespread FUD around inline style performance. Maybe it’s time to re-evaluate your styling framework and consider a simpler approach!

Switching to Inline Styles Could Save You 15% or More on Page Speed danielnagy.me/posts/Post_cap…

What inline styles can do in 2024

You either die writing CSS or you live long enough to see yourself writing inline styles. — @danimal_channel

When everything else has bugs, you accept the performance hit (assuming it even matters).

CSS Hooks v2 in a nutshell

@gregwilker How do you change an element's background color on hover with inline styles?

P. S. Not a fan of the new API? You can still upgrade with a little help from github.com/nsaunders/css-….

v2 has landed with a more composable model for hooks, adding flexibility and promoting reuse. With locally-defined combinational logic, you can invert a hook or combine it with other hooks using and/or operators. Check out the details on the new website! css-hooks.com

As of today's v1.8 release, CSS Hooks supports @supports!

v1.7 is out! The `css` function now accepts a variable number of style object arguments, merging them in a more predictable manner than spreading. Enabling the new `sort` option ensures that the last declaration in input order always has the highest priority. Default in v2?

Are you a @QwikDev in need of a simple styling solution? We've got you covered with our latest framework integration. Visit our website to get started...quick. 🙃 css-hooks.com

@b_e_n_t_e_n_ Great question! `recommended` is a shortcut for an opinionated set of hooks, but the existing API remains unchanged. That means you can still configure hooks directly, e.g. const [hooks, css] = createHooks({ md: "@media (600px <= width < 1000px)" });

We recently published v1.4 featuring a new "recommended" hooks API that offers a convenient way to configure pseudo-class and media query hooks - with more options to come! All hooks are now opt-in, further reducing the size of your style sheet. Ours went from ~3.5kB to ~0.6kB!

We'd like to extend a special thanks to @markdalgleish for the general design of this API!

This comes with one caveat, which is that you'll need to upgrade to TypeScript v5.3 to use the new `recommended` function. If you can't upgrade yet, don't worry: The existing `createHooks` API remains unaffected.

@_poteboy_ @sebastienlorber @agilecoder @Poteboy Hi @_poteboy_, we've removed this phrase from the homepage and updated our "predictable performance" highlight to explain that hooks don't use style injection. Thanks again for your feedback and please keep it coming!

@_poteboy_ @sebastienlorber @agilecoder Thanks for the kind words and feedback @poteboy. We'll review our use of the phrase "practically zero runtime".

From CSS madness to CSS Hooks - @agilecoder This new @CSSHooks lib is so cool! Just give me better inline styles, this is the ideal DX for me 🙏 This is the closest we can get, thanks to a CSS var trick explained in this article: nsaunders.dev/posts/css-madn…

@jacobrask @__morse @simonswiss @zeldman @mezzoblue @tailwindcss Yes, this is planned, but is much harder to implement than the rest of nesting, so it will happen later.