When theming a new website or re-theming an existing one, designers and developers alike can benefit immensely from creating a style guide.

Style guides aren’t new with the web. Companies have been using them for aeons in order to capture a concise unified portrait of the visuals involved in their brand identity. Following a style guide, multiple designers with different tastes/preferences can work on the same project and create a consistent design.

Style guides carry added benefits for front end web developers. The cut down enormously on time spent theming, and economize the amount of css that goes into a site, preventing stylesheet bloat.

As a developer, whenever I approach a theming project, before doing any page templates or laying out of divs, I like to create a pseudo style-guide of my own that contains the base css for the typeface and all of the common html elements I am likely to use heavily. More than any other onscreen element, what users spend most of their time looking at on a website is the text, so it is important that it looks sharp. Having a thoughtfully built typeface creates consistency and seamlessness in content throughout the site.

The way I like to make this guide is to take out a text editor and make a flat html file like so.

<h1>Header 1</h1>
<h1>Header </h1>
<h1>Header 1</h1>
…
Some paragraph text
<ul>
    <li>List item</li>
…
<table>
  <tr>
    <td>Table Cell</td>
...

I’m not going to list out every possible element that you might want to include. But header, paragraph, list and table elements are a must. It is also helpful to add basic form elements like text fields, check boxes, submit buttons etc. You can save this sheet and use it at the outset of all your theming projects. Link a new, blank stylesheet to this document and you are ready to css.

In my opinion this is the first css that should be written, besides perhaps an html reset.

I also find it helpful to style these elements on a flat white sheet before all of the logos, sliders, bells and whistles of the finished website arrive. Going through all of these basic, common html elements and making them look slick, goes a long way towards a polished, professional, finished product. As you get deeper into the theming, you will undoubtedly find situations where you wish to override your base style guide, but having a solid base like this to start from makes overrides easy, cuts down on endless repetitions of css, and makes many of your pages already half-themed just by writing the markup.