50+ CSS Best Practices and Coding Guidelines

• 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