Standardize Your Code Base.

Standards is something we all talk about in the web community. Whether it’s the W3C or Google Webmaster Search Standards, there is always “best practices” to follow. One of the greatest advantages for standards is modularity and readability of your code. If using standards and best practices, another programmer should be able to open up your code, read it, and easily modify/move elements around without much effort. So what happens when this other programmer is you? We’ve all looked at code we’ve created in the past with disdain, but how can we remedy the situation? Enter, the boilerplate.

Boilerplates are very common around the web. The offer a baseline of code to get you started on any build. With options out there like 320 and Up and the HTML5 Boilerplate created by some of the leaders in our field, its hard not to take a look under the hood and see what they do.

I’ve talked in the past about “Stealing is Good” and how reading others’ code can help you improve your own. And this is no different. Obviously is hard to simply just start coding completely different than you have in the past, so I offer this solution.

Create A Personal Boilerplate

By creating a personal boilerplate template, you can start to refine your own code base and make it more extendible and easy to fit in your work flow. By making your codebase standard, you can use it to start any project.

Step 1: Read Your Own Code

I know its probably painful on some older sites, but go back and look at your own code. Take note of any common HTML elements you use, or class names you repeat. After that go into the CSS and checkout common themes as well. What margin are you using on the bottom of your p, ul, ol, or dl tags? Do you like to have your CSS broken into new lines are tabbed or both?

Step 2: Start Coding the Boilerplate

Next, start coding your own boilerplate. Create a mock site with Lorem Ipsum that incorporates every element you can think of. Use the class names you commonly resort to, and whittle down the specifics so it can be used more than once.

Step 3: Research Other Boilerplates

Checkout some of the other boilerplates out there. Take a look at how they structure their site, and their CSS. Are they using EMs and percents? Are they including some -webkit or -moz rules you’ve never heard of? Look them up and see if they’re appropriate to incorporate into your boilerplate.

Step 4: Version and Deploy your Code

Now that you have your boilerplate finished, share it with the world. Ask for advice or tips and how you can improve your boilerplate. Also if you version your code with the help of Git via Github, it makes that sharing much easier and also allows your to keep track of your changes.

Standardizing and refining your code base will help you develop sites more efficiently and with cleaner results. In doing so you’ve help your future self who will inevitable look back at the code your writing now and not say “What the hell was I thinking?”