Nest Your CSS
Just a plain simple tool to nest, unnest & minify CSS styles
6 followers
Just a plain simple tool to nest, unnest & minify CSS styles
6 followers
A (hopefully) beautifully designed & developed, framework-less tool to convert standard CSS into nested CSS. Free, open-source, and born from a challenge to build an 'Awwwards-level' simple online converter tool.
Hey guys!
I'm the maker of Nest Your CSS.
About a year ago, I found out about native CSS Nesting but found no simple converters online. The next-best available were for SCSS and often produced invalid CSS that needed a ton of refactoring to make work.
So, I built my own.
It started as a simple MVP (quickly.nestyourcss.com), but spiraled into a personal challenge: Could I turn a simple online converter tool into an "Awwwards-level" website using just pure HTML, CSS, and JS?
Here's the result: https://nestyourcss.com/
It's free, no-ads (for now they're just placeholders), and no-signup.
This project was a massive learning experience for me. I hoped to learn a little, but ended up giving myself a masterclass in frontend web development. I learned a ton about:
The 'Why' Behind Frameworks: I now truly appreciate the solutions they offer, after experiencing the fustrations of the vanilla languages firsthand. And yet, I also value the fine-grained control you get from the fundamentals.
Real-World Accessibility: I went beyond semantics and dove deep into ARIA to make the site genuinely usable for screen reader users.
Modern CSS: I got to play with everything from @scope and @layer to relative color syntax. I'm now a W3C draft-watcher!
And, of course, just tons more.
The entire project is open-source, and here's the Github repo, Figma files, and the isolated UI code for some of the animated components you see you as you scroll down, if anyone's curious.
I'd love to hear your feedback on the design, the functionality, and the overall experience. Thanks for checking it out!