Purify CSS Tool Vaults Remote Students into Hacker News Limelight

Inspired by past student projects that made meaningful contributions to the open source community, a group of students in our Remote Beta program went into their final project looking for a problem to be solved. After investigating several avenues, they conceived of and built Purify CSS, a tool that speeds up apps by removing unused components related to the staple design language CSS. Since Purify CSS was released, the reaction from the developer community has been overwhelmingly positive, with coders already adding to the framework and using it in their projects.

Originally, the group looked into building a library for UnCSS, a popular framework that makes CSS more efficient, but they soon found that UnCSS was too limited for today’s apps. Specifically, UnCSS does not work for single-page apps (which don’t reload each time they shift to a new screen), because of how it interacts with HTML.

“We realized that UnCSS wasn’t good enough for the apps being built today. “That’s when we decided to build something more versatile than UnCSS,” says Kenny Tran, who built Purify CSS with Matthew Rourke and Phoebe Li.

“Working on a project from the ground up was exhilarating,” adds Li.

The result was a tool that finds whatever CSS elements are in an app but have no chance of actually being used, and returns a file without those components. Purify CSS also works with the JavaScript tools Grunt and Gulp.

css, css tool, css framework, student project, hacker news, github

The Purify CSS team, from left: Matthew Rourke, Phoebe Li and Kenny Tran.

“We are taking out pure deadweight,” Tran explains. “We look at all your files and remove anything with no chance of being used.”

Why would such a file be there in the first place?

“There are a couple reasons,” Tran continues. “You could be working with a legacy code base, where features change and no one went in there to delete the classes. Another reason it’s becoming more important is the proliferation of CSS frameworks. With [the popular CSS framework] Bootstrap, it’s a 6,000 line file and you can use whatever you want. You might only be using two or three classes but you’re loading the entire file.”

The team put Purify CSS on the popular tech news aggregator Hacker News, and it immediately received a flurry of upvotes and positive comments:

“A developer’s dream tool!”

“AWESOME!! This is just what I was looking for!!”

“This setup is ideal IMO. Keep your existing files, like bootstrap, intact in case you ever DO use them but integrate this into your deploy process to do compression and minification prior to getting out to your server. Workflow wise, this is a huge win.”

The accolades have spread over to GitHub, where the project has over 5,400 stars.

Along with the praise came contributions to the project. One developer helped remove lingering bugs and another wrote a tutorial for using Purify CSS.

With this attention came a new responsibility: managing an open-source project with active contributors.

“Managing an open source repo is a great learning experience,” notes Rourke. “You have a lot of people coming to you with suggestions to fix things and a lot of people coming asking for new features. You have to read a lot of code and see if it makes sense for what Purify CSS is trying to do.”

For Tran, the entire experience has shown the power of identifying pain points felt by other people and providing a solution:

“The biggest thing I learned from doing Purify CSS was that if you find problems that really matter to the world, and you solve them, people will notice.”

Tran presented Purify CSS to a group of hiring employers at our most recent Hiring Day:

Want to learn skills for solving an incredibly wide range of problems? Apply to our program, online or in four major cities, today.

Read more:

Remote Beta Students Top Hacker News

What a Remote Student Learned Building a Popular React & Flux Framework

Alum Builds Lightweigh CSS Framework for Prototyping and Hackathons