CSS : Coding Convention

Coders have their own personalities and ways of doing things. Some of these habits and coding practices are great and efficient - and should be learned from. Others are either a lack of discipline in adhering to a convention - or submitting to the ambiguity of not having an exhaustive, all-encompassing convention to refer to.

The following is a convention was created and tuned over the course of many years working with many groups and taking feedback from many bright minds.

• Remain unambiguous. There should always be a clear "right" and "wrong". Remove opinion from the process.
• Be free of exceptions. If a convention has too many "except in the case of…" statements, it's too complicated.
• Keep it simple! A convention that is too complicated to use or to difficult to learn is not a convention.
• Be easy to read and quick to debug. Human readability will trump file size every time. If you're concerned with keeping your byte-weight down, you should be incorporating minification anyway.

1. Each selector is on it's own line.
2. The opening curly brace is on the same line as the last selector.
3. Each declaration is on it's own line - and indented with 2 (two) spaces.
4. Each declaration has a colon immediately following the style attribute and a single space between the colon and the style value.
5. Declarations should be alphabetized by their first non-vendor prefixed letter character. Hacks (* and _) should be put immediately after their non-hack counterparts. Everyone can alphabetize and everyone can know to expect "border" to be toward the top and "width" to be toward the bottom. Vendor prefixed items (such as -moz-border-radius) will be alphabetized as if it were simply "border-radius". For compatibility, vendor prefixed declarations should come before the general declaration.
6. The closing curly brace should be on it's own line with no preceding whitespace.
7. A single blank line should be between each style set.
8. All non-RGBA color values should be upper case Hex.
9. All Hex values should be appropriately short-handed - with the exception of those used with IE filters (for the sake of compatibility).
10. !important is a no-no.

#namespace1 div,
#namespace2 div {
  background-color: #EAEAEA;
  border: 1px solid #EAEAEA;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  color: #3C3C3C;
  margin: 0 auto;
  padding: .5em;
  text-align: left;
  width: 25em;
}

• Vertical scrolling is generally inevitable with any convention - horizontal scrolling, however, is mostly mitigated with this convention.
• Much easier to read code diffs - and see more precisely what has changed.
• Easier and faster to comment out specific selectors or style declarations.

Following this convention, your code should become much more consistent and maintainable. This does not, however, speak to the quality of that which is coded. For tips on writing CSS, see the CSS: Summary of Best Practices.