What to avoid
In-line CSS
Absolute font sizes
Single quotation marks around paths for images
CSS hacks
Redeclaring inherited values
Applying padding/borders and a fixed width to an element.
!important and position: absolute
Name classes/IDs based on appearance
Good style
CSS declarations on one line
Comment your code
Organize your CSS file
Indent as necessary
Make your code easy to read
Use a common naming system
Sort declarations alphabetically
A ";" is not necessary for the last declaration
If declaring a unit of 0 px/em/%/... you can ommit the unit
Keep containers, properties, selectorsand CSS hacks to a minimum
Group selectors allow you to select multiple elements at once
There often is a handy shorthand notation
Shorten hexadecimal colour notation
Define pseudo classes for links in the LoVe/HAte-order
Define element’s margin, padding or border in TRouBLed-order
You can use child selectors
Make use of different media types
Name classes/IDs based on function, not appearance
Learn to exploit the cascading nature of CSS. CSS has sophisticated rules for inheritance of rules
You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes
Change capitalisation using CSS
Order all the elements belonging to the header, main container, footer ... together for better overview
Take a look at coding guidelines of big companies
Seek inspiration from the gurus of design
Take a look at Blueprint, a CSS framework, a lot of great ideas are integrated and commented
Ease your life
Use a CSS cheat sheet
Build and test your CSS in the most advanced browser available before testing in others, not after.
When in doubt, validate
Test embedded, launch imported
Keep a library of helpful CSS classes
Try out an online CSS compressor, some of the methods that CSS shrinkers employ to squeeze your CSS file size down can be employed in a less extreme way to make your CSS more streamlined
Get the web developer toolbar for Firefox
Keep a library of helpful CSS classes.
Use a CSS framework like 'Blueprint'
Did you know?
You can assign multiple classes to a given element
Set constant values throughout a CSS document
The simplest option is just to include the color value in every rule you want it in, and use search and replace when you want to change it. This is pretty trivial with a good text editor.
Since an element can have more than one class on it, you can make classes for each constant or variable you want to create, then assign these classes to the (X)HTML elements you want to affect. Since an element can have more than one class on it, this shouldn't interfere with any existing uses of the class attributte. Then if you want to change the color, all you need to do is change the class definition.
Use a Server-Side Language to Write Out the CSS.
There are some examples of CSS server side preprocessor languages now. Switch seems to be the most developed
You can add CSS-styling to RSS-feeds
You can prevent spam with CSS
You can offer customizable design by dynamically creating the css file with php
There are ideas for CSS Design Patterns