Use only what you need

The other day Rachel Andrew posted Stop solving problems you don’t yet have, where she brings up an increasingly common problem with front-end development – unnecessary bloat.

I agree completely. Too many people include too much by default in their web projects these days. Boilerplates, polyfills, shivs, crazy conditional comments, rare or uneccesary meta elements, and so on.

A whole lot of that stuff gets included whether it is needed or not, “just in case, and I’ll remove anything I don’t actually need later on, promise”. In my experience, that hardly ever happens. Once you’ve spent several weeks or months working on a project that may have been passed on from one developer to another, it can be pretty hard for anyone to tell what is actually used and what is there “just in case”. Or you start relying on something that you don’t really need just because “it’s already there, so now I might as well use it”.

In my opinion it’s much better to only burden your project with extra code once you’ve decided that you actually need it, and that the polyfill/framework/whatever adds enough value to justify the cost of including it.

Like Rachel puts it in her article:

So make sure every bit of code added to your project is there for a reason you can explain, not just because it is part of some standard toolkit or boilerplate.

Bandwidth and CPU issues aside, all of this stuff also tends to needlessly tie layout and JavaScript way too close together for my tastes, especially in older browsers. CSS is for presentation, JavaScript for behaviour. I like to keep it that way. Using JavaScript to patch some minor layout issues is fine, but if the entire layout falls apart when you turn JavaScript off, there is a problem somewhere.

Posted on March 23, 2012 in CSS, Coding, JavaScript

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.