DEV Community

Discussion on: How to Make CSS Reactive!

 
joelbonetr profile image
JoelBonetR 🥇

"I think you might have some misconceptions about what Im saying" yes, totally agree 😂

I didn't tried your lib yet, i was only trying to figure out why I should need it. I think I understand better ehat you are talking about specially referencing to Houdini, I'll take a look at it when possible (I'm hands on various projects so I've not much time left).

I'm working through performance as first need with my colleagues since some months ago and I'll try to check your source code and make some tests.

The tests we already did was using some libs like Material vs custom styling and inside custom styling we tried some different methodologies to achieve the best performance possible, meaning to deal as few weight as possible to the client and getting as few execution timings and resources wasting. With this in mind, Preact is better than React or Angular, also svelte has a nice way to work from my POV, hope it and it's community grows more for being able to present Svelte demo as valid
framework for a long term application on production (as it manages DOM instead on generating and comparing virtual DOMs the resources needed are way less).

By the other hand I couldn't find a better way to style the Apps than using CSS for all the possible use cases, this is what you said you don't follow, no problem, take a look at my profile and find some articles about "CSS only interactive components". I use :target pseudo for showing/closing modal windows, :checked for dealing with tabs and accordions etc instead on using JavaScript for that.
This permits quick user interactions as the CSS is pre-rendered, no re-rendering nor re-painting here.

At this point you must note that avoiding JS is the key for performance, CSS is loads faster to load and execute and it's API growth well those years, I hope it will grow more on the following for this reasons. Then of course you need some kind of strict pattern and architecture design into your stylesheets to avoid common issues (need for overrides, proper inheritance and so); a mix of BEM methodology with some modifications is what I found better to balance a clean development with a good performance (I'll write a post about in the following days).

I'm a little skeptical about adding libs because we managed to generate a production preact App which uses a custom css framework created by my own with preact components and custom styling that weights less than 400Kb in total; adding a lib which weights 75kb + is a huge percentile weight addition.

Anyway as I said I'll take a look for sure and try to figure out the use cases and thinking about this out of the box objectively (if you already tested it for specific use cases on which you know it helps, please tell me to reproduce it on my tests).

I'll read the readme and the info you linked tomorrow as late 😁