How to Remove Unused CSS from your Stylesheet Files

There’s a certain class of web designers and developers who insist on going about their web design exploits with more of a full-stack approach, justifiably so too because at the very least you want to maintain the level of technical skill and knowledge you have. It’s all good and well making use of the likes of WordPress as a CMS solution to facilitate rapid development, but those developers who pride themselves on their hard-coding, ground-up knowledge want to know that they can always go back to basics if it ever gets to a stage where the most popular CMS solutions providers decide to start charging for the technology which is currently deployed on the open source model.

This isn’t a discussion about hard-coding though, but rather about a very specific aspect of what being a web design purist entails, so to say. As much as you might pride yourself in being a hard-coder who builds websites from scratch, in this day and age we cannot run away from integrated solutions such as the various CSS and JavaScript libraries we use as plug-ins. In fact, if you don’t use at least two or three of the most popular libraries, most of which are a great combination of both JavaScript and CSS, you’d be spending a whole lot more of your time on repetitive tasks, prolonging even the most basic of web development projects.

In short – you’d get left behind because of how slow your production rate would be. So I think it goes without saying that you’d probably deploy the likes of Twitter’s Bootstrap and other frameworks which are built on a collection of libraries that cut out a whole lot of would-be long and tedious work.

Now, on the flip side of the coin however is that as much as it’s as easy as referencing an entire framework library to gain access to all the features you’d otherwise have to break your head coding from scratch, all the data contained in these libraries can become rather sizeable. And a lot of this data goes unused, such as the many JavaScript functions and a lot of the CSS which is usually included to account for each possible deployment scenario.

Needless to say this has some performance implications, i.e. if you have a CSS style sheet which came as part of a framework library and it basically allows you to choose different header colours for example, each and every possible colour combination would be included in the CSS code. You can just imagine what that does to performance elements such as your site’s loading speed.

The simple removal of unused CSS can not only speed your site up by a significant amount of time, but it also contributes to the general direction in which the biggest search engines are focussing on in their ranking of sites, which is user experience.

Don’t let the ease with which removing CSS which goes unused through specialised online tools like UnusedCSS have you underestimate the need to do so though. Try to do it manually and you’ll just be giving yourself the amount of what will subsequently be deemed to be unnecessary work to do, but when the un-deployed CSS is actually removed then you see a noticeable difference.

Leave a Comment.