CSS Code Standards

code-standards.css.markdown

Selectors

• begin on a new line
• space between selector and opening curly brace
• closing curly brace, unindented, on its own line

selector {
  property: value;
}

Properties

• each property/value pair on its own line
• all lowercase
• space between property and value
• indentation of property: value
• do not alphabetize properties
• group thematically similar properties. ex. height followed by width, positioning, font properties should remain together

.main-content {
  height: 300px;
  width: 500px;
  font-family: myriad-pro;
  font-size: 16px;
  margin-left: 10px;
}

Enter spaces between multiple values.

.main-content {
  font-family: arial, helvetica, sans-serif;
}

Hex codes should be written all lowercase, using three characters when possible.

.main-content {
  background-color: #fff;
  color: #5901cd;
}

Vendor prefixes should precede non-prefixed properties

main-content {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

Classes and IDs

• Classes should be written all lowercase, with hyphens rather than underscores.
• IDs should be written in bumpy case (a.k.a. camel case).
• Do not abbreviate words (e.g., "side-navigation" rather than "side-nav").

.side-navigation {
  float: left;
}

#sideNavigation {
  float: left;
}

Commenting

.css style sheets use /* */ to denote comments.

/* Here's a comment in a CSS file. */

.less style sheets use // to denote comments.

// This is a comment section in a .less file.