Use class instead of giving style to Typography elements

One of the best way about creating better stylesheets is making unique classes for common properties.

The idea is, instead of setting global styles for typographic elements like p, ul, ol, h1, h2, etc, that you would instead apply those styles as a class, perhaps  .text...

There will be lot of places on a website where you want a clean slate to work from and not be worried about what global styles are doing. The classic example is lists, where when using them for things like navigation you likely don't want the same margin/padding/list-style as you would within an article.

So make different classes with whatever style properties you want to apply.

Instead of 

p{}

span{}

ul{}

ol{}

h1{}

h2{}

Make classes:

.font12size{font-size:12px}

.floatleft{float:left}...

and use it with the elements as <p class='font12size'> CSS technique </p>

Of course, the effectiveness of this depends on the website. What kind of site it is and what stage the project it's in. I suspect it would work better on websites that have a more "modular" architecture and that don't have a huge set of legacy content. I'd be interested in trying it on a fresh project.

Must Read HTML5 technique:

1. HTML for Icon Font Usage
2. Icon Font examples