General rules for CSS naming and formatting.
Use "camelCase" names
<style type="text/css">
.title { font-size: 2em; }
.firstClass { font-size: 80%; }
.someOtherClass { font-size: 80%; }
</style>
Try to avoid using attributes in the name. For example if you have
.red { color: red; }
...
<span class="red">Some text</span>
The output will look like this: Some text. And then you (or somebody else) decide to change color to something else, for example blue:
.red { color: blue; }
You will end up with HTML code that says class="red" while output is like this: Some text, which is nonsense, of course. It is much better to have more generic names for classes like that, for example: emphasis, highlighted, standout...
.emphasis { color: red; }
...
<span class="emphasis">Some text</span>
And no matter if you change color to red, blue, or whatever... you will never had nonsense in HTML code and output like explained above.
Use ID's: header, footer, content, wrapper, inner, outer, container... Names like: html, head, bottom, top, left, right, should not be used for document layout.
Try to use as many HTML tags as possible. Instead of:
div.maintitle { font-size:2em; color:orange; }
...
<div class="maintitle">Some text</div>
You should always consider using title tags: H1, H2 ... H6
H1 { font-size:2em; color:orange; }
...
<h1>Some text</h1>
If you want to have different style in different selectors, you can do it like this
H1 { font-size:2em; color:orange; }
#header H1 { font-size:1.2em; border-bottom:1px solid #e0e0e0; }
...
<div id="header"><h1>Header title</h1></div>
...
<h1>Some text</h1>
You can reset some HTML tags like this
h1, h2, h3, h4, h5, h6 { margin: 0.5em 0; padding: 0; font-weight: normal; }
But avoid resetting common attributes like margins for P, H1, H2, ... If you need <P> with no margins it is much better to define new class
P.myClass { margin: 0; padding: 0; }
...
<p class="myClass">Some text</p>
Rather then reset all paragraph tags (<P>) and then adding spaces before and after manually with <br /> or inline styles
P { margin: 0; padding: 0; }
...
<p>Some text</p>
<br />
<p>Another paragraph</p>
<p style="margin-top: 2em;">Another paragraph</p>
Avoid using inline styles ad much as possible
<p style="margin-top: 2em; color:blue;">A paragraph text</p>
Use classes instead
<p class="someClass">A paragraph text</p>
Why? Because if you do so then you don't need CSS file, you can format your document using HTML only. The idea behind CSS is to have all styles defined in one place, while your HTML code is clear of formatting. In example above, if you change style for P in your .css file, this won't affect the paragraph with inline tag, it will always remain with 2em top margin and blue text no matter how you format your css file.
Shorthands are convenient but sometimes hard to read.
.text { font: 1em/1.1em bold italic small-caps Verdana, Arial, Helvetica, sans-serif; }
Is the same as
.text {
font-size: 10em;
line-height: 1.1em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
But the second example is more readable. Use shorthands for the most obvious cases only, like this:
.aClass { border:1px solid #0000FF; }
Beause it's very easy to read, the same as:
.aClass { border-width:1px; border-style: solid; border-color: #0000FF; }
If you don't have to reference specific object, it is strongly recommended to use class instead of id selectors especially if they share the same formatting.
Instead of
#div1 #listing { }
#div2 #listing { }
#div3 #listing { }
Use
<style type="text/css">
.listing { /* style definition */ }
</style>
...
<ul class="listing">
<li>First item</li>
<li>Second item</li>
</ul>
...
<ul class="listing">
<li>The content</li>
</ul>
Use selectors only if:
In all other cases use classes.
Always use em instead of pt, px, cm, ...
<style type="text/css">
.title { font-size:18px; }
</style>
This will keep your site more accessible and you can easy resize the entire site's font size if you need it bigger or smaller.
<style type="text/css">
body { font-size: 80%; }
.title { font-size: 2em; }
</style>
For shorter styles you can use one-line
.title { font-size: 2em; }
.otherClass { color:red; border:1px solid blue; padding:0.2em; margin: 0.5em 0; }
But if you have many attributes, it's is much better and more readable if you separate it one per line:
.someClass {
color:red;
border:1px solid blue;
padding:0.2em;
margin: 0.5em 0;
position: relative;
cursor: pointer;
}
Try to indent and block your css. If you have multiple selectors with same properties, separate them with comma (,) and indent
<style type="text/css">
.class1,
class2,
class3,
class4 { font-size: 80%; }
.otherClass { font-size: 2em; }
</style>
Group your selectors together, if you have selectors that you use in the header, put then next to each other, even better, add comment:
/* HTML Tags */
BODY { background: #ffffff; }
H1, H2, H3, H4, H5 { margin: 0.5em 0; padding: 0; font-weight: normal; }
A { color: red; }
/* Header */
#header { border-bottom:1px solid black; }
#header .subtitle { font-size: 2em; }
#header H1 { color:red; border:1px solid blue; padding:0.2em; margin: 0.5em 0; }
#header UL { list-style-type: none; }
#header UL LI { margin:0; padding:0; float:left; }
/* Main content */
#container { margin-top:2em; }
...
It will look even more readable if you format it a bit like this:
/* HTML Tags */
BODY { background: #ffffff; }
H1, H2, H3, H4, H5 { margin: 0.5em 0; padding: 0; font-weight: normal; }
A { color: red; }
/* Header */
#header { border-bottom:1px solid black; }
#header .subtitle { font-size: 2em; }
#header H1 { color:red; border:1px solid blue; padding:0.2em; margin: 0.5em 0; }
#header UL { list-style-type: none; }
#header UL LI { margin:0; padding:0; float:left; }
/* Main content */
#container { margin-top:2em; }
...
Use external CSS files. Period.
Put your stylesheets at the top of document. The HTML specification clearly states that stylesheets are to be included in the HEAD of the page.
<head>
...
<link rel="stylesheet" type="text/css" media="screen" href="cssfile1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cssfile2.css" />
</head>
It is better to have one large css file rather than multiple small files because that way you reduce http requests and since browsers cache css, you will see the performance benefits right after the first page load.
It's nice feature but poor performance. It has the same effect as using <LINK> at the bottom of the page.
Never use expressions unless you absolutely have to. It is better and more compatible to use javascript if you need feature like that.
.someclass { background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); }
It is nice idea to reuse styles you already have but sometimes it is better to skip it. If you have your common styles (for example FORM formatting) and you include it in a new project where you don't have forms (or forms are very simple), it's just waste of bandwidth because you not only load more than you need, but you make additional http request for each css file which can lead to longer load time and poor performance.
Minify your css files. Math is very simple, if you have 5,000 visits each day (lets count that browser cache css so it doesn't load each time) and you have CSS file that is 25KB instead of 50KB, that is bandwidth save of 125.000 KB, or 122 MB. Daily. It's 3GB each month for a single CSS file. It's not difficult to imagine how much you save for all CSS and JS files, plus images... it can reduce bandwidth for more than 10GB a month on a single domain and it's very easy and simple to do.
Reduce the number of DOM elements.
Optimize images and if you use lot of icons, create one large image with all icons and create css styles using sprites
IMG.icon { width:16px; height:16px; background:url(../icons.png) no-repeat; }
IMG.icon.new { background-position: 0 -16px; }
IMG.icon.save { background-position: -16px -16px; }
...
Document created in March 2008. Version 1.0 beta