As we progress towards having more folks creating & maintaining CSS to support various TOPP initiatives, it's important that we use similar conventions to facilitate creation / maintenance of these sites.

This is should be considered a starting point. As we decide which conventions work best for our team, they should be added here as a reference.

• Use hyphenated class names and ids, not underscored or camel-case. This means that "post-title" would be used instead of "post_title" or "postTitle".
• Where possible, class and id values should be functionally / structurally descriptive. With very few exceptions, class and id values should avoid being visually descriptive. That is to say, "permalink" is a much better class name for links than "big-blue".
• Declare colors using hexadecimal values, instead of RGB or keyword values.
• Writing a rule as margin: 0 0 .2em; can leave ambiguity about whether the rule is intended to create a bottom-margin of .2em, or a horizontal margin of 0.2em. To make intentions explicit, always include a leading zero when using fractional units:

  .post-title {
  margin: 0 0 0.2em;
  }

• Each CSS style should be on its own line, even if there is only a single style for a particular rule:

  #main {
  margin: 10px 0;
  }

• Similarly, each CSS selector should be on its own line:

  .admin-links a:link,
  .admin-links a:visited {
  font-size: 0.85em;
  color: #f14447;
  text-decoration: none;
  ­}

• CSS styles should be of the pattern property: value;. No space in between the property and the colon, a single space between the colon and the value, and terminated with a semi-colon.
• All elements which are targets for javascript behavior should use a "js-" prefix for the class or id used as a selector by the relevant javascript. This has two benefits:
  1. it creates a namespace exclusively for behavior-oriented classes & ids (reducing the chance for collision with 'regular' classes & ids)
  2. it makes the javascript dependency explicit for users editing / maintaining the views, reducing the chance of unintended consequences to application behavior when editing markup.