CSS should be kept in a few, minified, external CSS files. Don’t use inline style blocks or write inline CSS. (There’s an exception to this guideline: when your CSS is very, very, small and can be included in the document so that the page has one less HTTP request)
It can help to use a style guide to keep your code consistent and readable. Check your code for errors and complexity using something like CSS Lint (there’s an example file in this Guide). Use SMACSS as a guideline for writing your CSS. Organise your files into: Base; Layout; (lots of) Modules; States.
- Use CSS in places of images where possible.
- Keep selectors simple (use
nav ainstead of
nav ul li a), and don’t over-qualify them (use
- Use shorthand. Use
padding: 1em 2eminstead of individual padding properties.
- Don’t use ID selectors or
- Use names that make sense to you, future you, and your team. Describe the purpose, not the properties or presentation.
- Use Progressive Enhancement for newer CSS features. If you set colour using
rgba, set it using
rgbon the line before.
Sass, Less, and other preprocessors can be helpful for writing CSS. Remember to keep it simple, though. Think about only using variables, imports, mixins, and (the more friendly way of using) Media Queries.