CSS & HTML style guide

1st July 2013
This is not a "how you should write CSS / HTML" post.
Everyone has their own ways of doing things, these are just my personal preferences.

HTML

Quote Attributes Unquoted attributes are perfectly valid, but there are times when quotes attributes are needed (e.g having multiple class names). So to keep everything consistent I always use quotes, double quotes to be precise.
So
<div class=”container”></div>
Not
<div class=container></div>
or
<div class='container'></div>

Self Closing Tags
Close them, don't know why, but when I see them not closed it doesn't look right and bugs me a little.
So
<img src=”images/kitty.png” alt=”Kitty goes crazy” />
Not
<img src=”images/kitty.png” alt=”Kitty goes crazy” >

Optional Closing Tags
It is perfectly valid not to close certain tags, such as <li>. I mix and match this. I tend to not close <li> when they are display: inline-block; as it can cause an unwanted space after them.

Comments on closing tags
I know a lot of people put comments on closing tags, I don't.

Lettercasing
Always use lower camel case (start with lowercase and only use an uppercase letter if its a new word), not all uppercase as it isn’t shouting at you and not all lowercase as it makes it hard to see different words.
So
<div class=”reallyLongClassName”></div>
Not
<div class=”HELLOWORLD”></div>
or
<div class=”ReallyLONGclassName”></div>

ID’s
I never ID's. As an ID is only allow once per page it would mean that CSS isn't reusable. I would also use class when targeting elements with JavaScript.

Whitespace and Indenting
I love whitespace, it makes things much easier to read.

I use four spaces when indenting a new line.

Here is an example of a some HTML and how I like to pad it out.
<div class=”products”>
    <a class=”product” href=”kitty-kat-poster.html”>
        <h1>Kitty Kat Poster</h1>

        <div class=”price”>
            £64.99
        </div>

        <div class=”image”>
            <img src=”/images/kittyPoster.png” alt=”Post of a Kitty Kat” />
        </div>
    </a>

    <a class=”products” href=”silly-dog-poster.html>
        <h1>Silly Dog Poster</h1>

        <div class=”price”>
            £34.99
        </div>

        <div class=”image”>
            <img src=”/images/sillyDog.png” alt=”Silly dog, you're not a Kitty” />
        </div>
    </a>
    <div class=”clear”></div>
</div>
If its a block element (div, nav etc) then put the closing tag on a new line.
If its an inline element (a, span etc) then put the closing tag on the same line.

If the closing tag is on a new line, then indent its children with 4 spaces.
If the block element has nothing in it, such as in the clear div here, then close the tag on the same line.

There are some exceptions to these rules.
All heading tags should have the closing tag on the same line.
If you put a lot of content inside an "a" tag (e.g. styling it with the intention of it being a block element) then indent its children.

For a group of repeating elements, like here where there is a list of products, each product element is spaced out from its siblings.


CSS

So far you have seen how I like to write HTML, now lets have a look at some CSS.

Table of Contents
It’s nice to place a table of contents at the top of my stylesheets, especially the bigger ones. This will usually be done at the end of a project, once you know what titles you have.
/*------------------------------------*\
    CONTENTS
\*------------------------------------*/
/*
RESET
TYPOGRAPHY
CONTAINERS
*/ 

Section Titles
Use Large heading across each section of the CSS, like this:
/*------------------------------------*\
    CONTENTS
\*------------------------------------*/
The section header is much wider than that, about 3 times wider, so that when someone is scanning down the page, they can keep an eye to the right hand side (away from all the distracting code) and know when a section starts.

Space between sections
Be white space happy, leave 5 lines between the end of one section and the start of the next.
/*------------------------------------*\
    RESET
\*------------------------------------*/
 .className {
    margin: 0 auto;
}
 
 

 

/*------------------------------------*\
    CONTAINERS
\*------------------------------------*/

Formatting
Always write multiline CSS, like so:
.pageContainer {
    width: 80%;
    padding: 20px;
    border: 1px solid #ccc;

    background: url(“../images/bg.png”) repeat;

    color: #575757;
    font-size: 1em;

    position: relative;
}
Use one space after the class and one after the colon (love me some more whitespace). Group each property together by what they relate to, with one line after them to break them up.

I use the following order:
  • Box model related (width, height, padding, border, etc)
  • Background related (background, background-position, etc)
  • Typography related (font-family, color, font-size, etc)
  • Position related (position, top, right, etc)
  • Transitions
  • Animations
  • Everything else (z-index, opacity, etc)

Prefixed properties
Put the largest at the top, the smallest at the bottom, like so:
.className {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}


Other style guides