Remember the days when <font> tags were the standard means of formatting our content? Our pages were polluted and bloated with them. I especially remember the kind of code authoring tools such as FrontPage would create:
I then remember when CSS was first announced by Microsoft (not that they created it). I remember the examples they used to show it’s power. Placing text anywhere on the page, even overlapping it. At that time, people like me thought it kool to be able to use these new tags in place of the numerous tags that littered our pages. I like to consider this the first generation of CSS usage. Here’s an example:
The problem with this approach is that people started using
<span> tags excessively. This was not necessary, as (X)HTML provides enough tags, or “hooks” into the code to properly manipulate the presentation of the content.
This new found way to mark up the presentation was great … except, it was a new way to do the same thing. Our code was still as bloated with inline presentation code & attributes. So some leading designers started placing the CSS code in the head of the page.
This was a great step forward. However, it still added to the page size, and was a change management headache.
Then, people started thinking more efficiently. They started centralizing all their presentational styles in an external file. It made for easier site management and lighter pages.
CSS Best Practices
Note: The list below suggests a goal to move toward. The real world will always throw a curveball.
- Always use an external styles file and either link or import the styles from the file. Avoid the lazy urge to implement inline styles. One way to use different styles for a given page is to give the page’s <body> tag an id. Then refer to the id in your styles. Same holds true for other page elements.
- Design your pages and content semantically (structure with meaning). Avoid adding extra tags to hook styles to whenever possible.
- Planning before implementation will always make for easier & effective styles usage.