This document, like so much on this site, is a work in progress. As I do more with stylesheets and learn what works and what doesn't that experience will be codified here.
Also, like so much of the content on this site, this is not a diatribe or a directorate. I am not writing this to tell you how you should code your stylesheets. I am posting this to provide others with one point of view and a starting point for their own coding standards. Kernighan says it best in "The practice of programming" that it does not matter which coding style you pick, as long as you pick one and apply it consistently.
Prefer class over ID selectors. Styles can be applied to an element by either selecting it by class or by ID. For example title is a class selector and #footer is an ID selector:
<head>
<style>
.title {
color: orange;
}
#footer {
font-size: 0.8em;
}
</style>
</head>
<body>
<h1 class="title">BitWorking</h1>
<span id="footer">Copyright 2002</span>
</body>
Always use class selectors for applying styles. ID's are also used for scripting access to elements and in XHTML there are restrictions on how many elements can have the same id.
Use "em" for font sizing. This will keep the site more accessible. Never use "pt" or "px" for setting a font size. See the CSS Techniques for Web Content Accessibility Guidelines 1.0 for more details.
Naming conventions are always a controversial subject. Just ask 3 different programmers about Hungarian Notation. I'm sure you will get 3 different, and possibly emotional, responses. Since I am fairly new to CSS I will fall back on skillsets I already have. My CSS naming conventions will lean heavily on my C/C++ naming conventions.
<html>
<head>
<style>
h1 {}
p, ol, li {}
.myNewFunkyStyle { ... }
.myFloatingFooter { ... }
.mainBodyContent P { ... }
.redBorderDiv { ... }
</style>
The names of the classes need to be clear and descriptive. I have seen two major naming conventions in stylesheets. To guide the discussion here is out motivating example:
<html>
<head>
<style>
.A { font-size: 2em; }
.B { float: left; }
.C { font-size: 0.8em; }
.D { color: rgb(100, 100, 100); }
</style>
</head>
<body>
<div class="A"><h1>Header</h1></div>
<div class="B">Navigation Bar</div>
<div class="C">Content</div>
<div class="D">Footer</div>
</body>
Here our page is divided into four logical blocks, the Header, Navigation Bar, Content, and the Footer. We have given them class names of A,B,C and D respectively. The question is what should A, B, C and D really be? Our choices fall into two broad categories. We could name the classes after the type of formatting they provide:
<html>
<head>
<style>
.largeFont { font-size: 2em; }
.floatLeft { float: left; }
.small { font-size: 0.8em; }
.brightColor { color: rgb(255, 200, 200); }
</style>
</head>
<body>
<div class="largeFont"><h1>Header</h1></div>
<div class="floatLeft">Navigation Bar</div>
<div class="small">Content</div>
<div class="brightColor">Footer</div>
</div>
You might be tempted to follow this convention but it has a major problem.
It does not keep the separation of content and layout and that can cause
maintenance issues. For example, what if you suddenly have a hankering for a noir
design and change your footer to a darker color .brightColor { color: rgb(0,0,0); }?
Now the term "brightColor" is not only not helpful, it is downright wrong!
It is a tempting naming convention because it seems to make it easier to apply the same style to different classes. What it we wanted to make our content bright like our footer?
<html>
<head>
<style>
.largeFont { font-size: 2em; }
.floatLeft { float: left; }
.small { font-size: 0.8em; }
.brightColor { color: rgb(255, 200, 200); }
</style>
</head>
<body>
<div class="brightColor"><h1>Header</h1></div>
<div class="floatLeft">Navigation Bar</div>
<div class="brightColor">Content</div>
<div class="brightColor">Footer</div>
</body>
But this is not really a savings. You still have the problem of changing the style to a darker color and now "brightColor" is non-descriptive for multiple parts of your document! There is a better way...
The alternative is to name your classes on how they are logically used on the document. For example:
<html>
<head>
<style>
.header { font-size: 2em; }
.navigationBar { float: left; }
.content { font-size: 0.8em; }
.footer { color: rgb(100, 100, 100); }
</style>
</head>
<body>
<div class="header"><h1>Header</h1></div>
<div class="navigationBar">Navigation Bar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</body>
Here the classes are named based on the type of content they will be applied to. Now we can change the style and the class names will remain relavent. But what if we want to re-use the same formatting for different classes? CSS provides a notation the provides for re-using styles while letting us keep our class names distinct:
<html>
<head>
<style>
.header { font-size: 2em; }
.navigationBar { float: left; }
.content, .footer { color: rgb(100, 100, 100); }
</style>
</head>
<body>
<div class="header"><h1>Header</h1></div>
<div class="navigationBar">Navigation Bar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</body>
Here we accomplished the same thing as we did earlier with "brightColor" but we didn't change the content of the web page, only the style. So now the naming style should be obvious. Name classes after the content they describe, not the type of style they provide.
Spacing and punctuation should be pretty obvious from the following example:
.header {
font-size: 2em;
}
.navigationBar,
.content,
.header i {
font-size: 0.8em;
border: solid black 1px;
border-left: solid black 5px;
border-right: solid black 5px;
}
I still haven't decided if I like the previous formatting or the following one. The only change is aligning the values of the css tags:
.header {
font-size : 2em;
}
.navigationBar,
.content,
.header i {
font-size : 0.8em;
border : solid black 1px;
border-left : solid black 5px;
border-right : solid black 5px;
}