CSS code structure for HTML 5: some useful guidelines

In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage.


I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes.

Section 1: General HTML tags
In this section I divide the code in two subsections. A first subsection that contains code to reset HTML standard tags and a second subsection that contains code to redefine HTML standard tags.

Section 1: Subsection 1
How you know, regarding CSS reset, this practice is used to reset default browser styles for HTML standard elements (body, h1, p, ul, li, ...). One of the most popular files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of lines of CSS code. In reality, in the majority of cases, the only frequently used tags that require to be reset are body, h1, h2, h3, p, ul, li, form, input and rarely table, tr and td. So if you prefer, you can use a shortened version of these files that includes only HTML elements you really used in your pages:

/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {

border:0;
margin:0;
padding:0;
font-size:100%;
...

}

In the previous code I highlighted in bold some HTML 5 new tags you could need to reset (see after for a short explanation about them).

Section 1: Subsection 2
In the second subsection of the section 1 I simply redefine HTML standard tags:

/* Subsection 2: Standard HTML tags redefinition */
body,
form, input {

color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}

h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}

a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}

If I need to define a standard tag (for example <h1>) with different properties depending on the position of the tag on the page (<h1> for post titles and <h1> for sidebar titles) I prefer to add the related CSS code into the section that contains structural tags (Section 2). For example, for the sidebar:

aside {...}

aside h1 {...}

Section 2: Structural tags
In this section I define all CSS elements that define the page structure. As I anticipated, HTML 5 introduces new tags that improve the semantic of the code. Some of these tags are: <header>, <nav>, <article>, <section>, <aside>, <footer>... You can use these tag instead of more common DIV layers we used until now (for example: <div id="nav">...</div>).
Shortly, the picture on the right represents a typical two columns layout that use HTML 5 tags to define page structure. If you want to know more information about this topic, I suggest you to take a look at these excellent articles:

- Smashing Magazine: HTML5 and The Future of the Web
- Steve Smith: Structural Tags in HTML5
- Lachlan Hunt: Preview of HTML5

CSS code is very simple:

header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}

Practically it's identical to the code we are using with DIV layers:

#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}
...

For each HTML element you can define its child elements. For example if this is the code for the navigation bar:

<nav>

<ul>

<li>...</li>
<li>...</li>
<li>...</li>

</ul>

</nav>

...the related CSS code is:

nav{...}

nav ul{...}

nav ul li{...}
nav ul li a{...}

As I said before, in order to improve code readability, I suggest you to use indented code, and alphabetical order to list properties of elements:

nav ul li a{

font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;

}

What changes respect to HTML 4? Not so much:

<div id="nav">

<ul>

<li>...</li>
<li>...</li>
<li>...</li>

</ul>

<div>

Simplifying, this kind of structural tags in HTML 5 are DIV layer with a specific ID in HTML 4:

#nav{...}

#nav ul{...}

#nav ul li{...}
#nav ul li a{...}

Section 3: Custom Classes
In the last section of my CSS files I add custom classes I can reuse in several sections (header, sidebar, footer,...).

/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}

That's all. If you have some suggestion about this topic please leave a comment, thanks!