Show HN: I tried to build an Awwwards-level CSS to Nested CSS converter
About a year ago, I found out about native CSS Nesting but was surprised to find no simple, pure CSS converters online. The closest were CSS-to-SCSS tools that often produced invalid (pure CSS) code that required manual refactoring.
So, I decided to build my own. It started as a barebones MVP (quickly.nestyourcss.com), but I got carried away with a personal challenge: could I turn a simple A-to-B online converter tool into something that felt like an "Awwwards-level" website?
I'm not a designer, and I know I didn't fully hit that mark, but it was a fantastic learning experience and I'm proud of how it turned out.
Here's the result: https://nestyourcss.com/
It's free and requires no signup. You'll notice some ad spots - for now, they're just static placeholder images. Part of the challenge was to design a site with ads in mind from the start, rather than having them disrupt the UX later. The site isn't connected to any ad network.
The front-end is vanilla HTML/CSS/JS (plus Ace Editor & Lenis), no backend, the nesting logic is written from scratch, and the project is fully open-source.
GitHub Repo: https://github.com/TimChinye/NestYourCSS
This spiraled into a project that massively solidified my front-end fundamentals. I learned a ton:
- The 'Why' Behind Frameworks: After experiencing the frustrations of pure HTML, CSS & JS firsthand, I have a new appreciation for why frameworks exist and understand the problems that they solve. I also now value the fine-grained control you get from the fundamentals.
- Performance as a Feature: I learned to incorporate it into my coding, from leaning towards composite-only CSS properties for animations to deep diving into the Chrome DevTools Performance and Rendering tabs.
- Deep Accessibility: Writing crawler-friendly, semantic HTML wasn't enough. I dove deep into ARIA roles and properties to make it actually usable with screen readers.
- Modern CSS is awesome: I got to implement new features like relative colour syntax, @layer, container queries, and more. It pushed me to follow W3C drafts more closely - I seriously can't wait for native mixins and functions (currently on the W3C standards track!).
- AI as a flawed co-pilot: Using AI sped up boilerplate, but also introduced subtle bugs. It was a powerful lesson in the importance of genuinely understanding every line of code you ship.
A few caveats:
The nesting logic has been heavily tested, but there are still edge cases. I wouldn't recommend converting massive files, it'll work perfectly fine, but it's best to stick to 3 or 4 levels of nesting - it's not reusable & leads to specificity issues. Ironically, my own site's CSS is an example of exactly what not to do.
This is a project I'm excited to feature in my portfolio, and I wanted to share it here first. I'd love to get any feedback. A genuine thanks for checking it out.
No comments yet