The key to make the CSS work well is to use it as it was intended, in a contextual way. Let me give you two examples:
This is a very common type of CSS rule name:
greenunderlined13px
A better rule name is:
important
Both rules are set to render the text as 13px, green and underlined.
Now the designer (or someone else) decide that the important parts of the text instead should be red, have no decoration and be 14px.
Imagine the confusion when you now change the class named "greenunderlined13px" to give you a text that is red, has no decoration and is 14px!
In my other example the rule name is "important", it's contextual and will always be valid and easy to understand, no matter what the formatting is!
So, when you start out a new site, try to break it down into areas that can be "fenced in" in a contextual way. A few examples: The header area, the copyright text, the main text area, etc…etc. The smarter you do this the simpler your work will be while building and maintaining the site, not to mention how much simpler it will be for other people who might need to work on your code!
Another common mistake is to pick <h> tags based on the text size they will give you. Things can't get more contextual than <h> tags, so the first header level should always be <h1>, the next <h2>, etc. Then use CSS to control the font size!
All this will become even more important when we move into new versions of HTML and maybe start using XHTML.
Another good way to structure your CSS is to use a lot of comments and to sort your rules into groups. Everything is usually crystal clear while you work on a project, but will it be crystal clear a year later?
More hints that can increase your flexibility and productivity…
Use the tag <strong> instead of <b> (bold), then set the format for the tag in the CSS. Bold is a look - strong is contextual.
The same goes if you display code in a page, instead of using <tt> or <pre> use <code> and make your settings in the CSS.
The <cite> tag (for quotes) is another good tag for building your CSS structure!
If you build your CSS this way and your client asks you to make all the quotes on the site “larger”, it should only take you 30 seconds to make the change, upload the new CSS and change the look of all the 3.244 pages!
Another scenario:
Your client says that people contributing to the site want to have their names in a larger font size.
If you have been smart and assigned the class "author" to the name of every contributor this change will also be a 30 second job!
I'm sure you get the idea!
The ideal situation is when every element on the page is controlled by CSS in one way or another, the control can be based on the element (tag), a class or an ID, the important thing is to pick the right “way” and to cover as much of the content as possible!
With CSS it definitely pays off to stop and think, regard that time as an investment for the future!
- michael ahgren
