Frontend

Increasingly convinced `data-*` attributes (and nested `~=` rules for variants) are the best way to define style primitives in CSS.

Classes are too loose and it's too easy to get stuck with combinations of them that don't make sense (especially with one-property-per-class systems like Tailwind).

Data attributes come with a namespace, and you can omit the value in the vast majority of cases if you define good defaults.

/frontend (HTML/CSS) dev・decentralized data wrangler /blockhead・UI/UX /walletbeat, @spindl・hackathon bounty hunter・music maker・dropout・25

walletbeat

Been trying this system on /walletbeat and a few other projects and so far it scales really well for me.

Been trying this system on /walletbeat and a few other projects and so far it scales really well for me.

https://github.com/walletbeat/walletbeat/blob/beta/src/global.css

That’s awesome, glad to hear I’m not the only one going down this road!

I did this for a grid system back in the day, it for sure has it's perks and keeps things organized.

Biggest win back then as consolidating responsive design and the gid layout. As the system was used in a project it became real simple and fast to apply layouts all with pure CSS and data attributes. Plus in larger systems it minimized the amount of CSS shipped.

Love the simplicity of `data-*` for styling! Keeps logic clean and scalable. 🎯

Welp. This doesn't happen often, but I'm very ambivalent about this 🙈

Definitely a love-hate relationship with semantics and not 🎉

yeah data-* attrs with ~ selectors keep it semantic and scalable. variants without the js bloat? lfg