An Awwwards-inspired online converter tool to minify, beautify, denest, and nest CSS code according to the latest CSS specs. Originally created as a personal portfolio project, it has since evolved into a well-rounded, publicly open-source tool for the modern front-end developer.
View Website · View Figma Design · View Codepen Collection
With the arrival of the native CSS Nesting module, there was a clear need for a simple, pure CSS converter. The available tools were often CSS-to-SCSS converters that produced code requiring significant manual cleanup.
Nest Your CSS was created to fill that gap.
The project began with a simple goal: create a reliable A-to-B converter. This goal expanded into a mission to build a portfolio-worthy, "Awwwards-level" application that champions high-quality user experience, accessibility, and modern web standards.
The result is nestyourcss.com: a free, open-source tool with no backend and no sign-up required, now maintained as a public, open-source application.
This project is a testament to the power of web fundamentals, built with zero frameworks.
- HTML5 (Semantic & ARIA-enhanced)
- CSS3 (Utilizing modern features like
@layer, Container Queries, and Relative Color Syntax) - Vanilla JavaScript (ES6+)
- Ace Editor for the code editing experience
- Lenis for smooth scrolling effects
- Nest CSS: Convert standard CSS to the latest native nested syntax.
- De-nest CSS: Flatten nested CSS back to standard, browser-compatible CSS.
- Minify CSS: Optimize your stylesheets by removing unnecessary characters.
- Beautify CSS: Format and indent your code for maximum readability and maintainability.
- Customizable Editor: Adjust font, font size, indentation, and word wrap to your preference.
- Load External CSS: Fetch and convert stylesheets directly from a URL.
- Deep Accessibility: Fully navigable and usable with screen readers, thanks to extensive ARIA implementation.
- Awwwards-Inspired UI/UX: A focus on smooth animations, visual appeal, and a high-quality user experience.
To get a local copy up and running for development or contribution, follow these simple steps.
Make sure you have Node.js and npm installed on your machine.
- You can download them from nodejs.org.
- Clone the repo:
git clone https://github.com/NestYourCSS/NestYourCSS.git
- Navigate to the project directory:
cd NestYourCSS - Install NPM packages and build the project for production:
npm install && npm run build - This will create a
distfolder with the optimized production files. Opendist/index.htmlin your browser to run the live version locally.
If you simply want to view the raw, in-development files without running the build process, you can open the index.html file in the root directory directly in your browser after cloning. Note that some features may behave differently than in the production build.
Contributions are the lifeblood of the open-source community and are greatly appreciated. If you have suggestions to improve this project, please feel free to fork the repo and create a pull request, or simply open an issue with the "enhancement" tag.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.