CSS Style Guide

Modified from the Google HTML/CSS Style Guide

Style Rules

ID and Class naming

Use meaningful names, but not overly generic names for CSS IDs/classes, or you'll run into issues with declaring styles for the same class repeatedly over the entire project.

/* Not recommended */
.atr {}

/* Recommended */
.attribution {}

Use only lower-case letters in ID/class names, separate words using hyphens only.

/* Not recommended */
#imagecomments {}
.image_comment {}

/* Recommended */
#image-comments-container {}
.image-comment {}

Type Selectors

Unless absolutely necessary, do not use element names in conjunction with IDs or classes for performance reasons.

/* Not recommended */
ul#example {}
div.error {}

/* Recommended */
#example {}
.error {}

Shorthand Properties

Use shorthand properties (e.g. font instead of separating the properties into font-size, font-weight, etc.)

/* Not recommended */
border-top-style: none;
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
padding-top: 0;

/* Recommended */
border-top: 0;
font: 100%/1.6 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 0 5px 10px;

0 and Units

Do not use units after 0 values unless they are required.

margin: 0;
padding: 0;

Hexadecimal Color Codes

Use three characters instead of two for hexadecimal notation if possible.

/* Not recommended */
color: #FFFFFF;

/* Recommended */
color: #FFF;

Formatting Rules

Declaration Order

Organize properties in alphabetical order to achieve consistent, easily-maintainable code.

background: #FFFFFF;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Property Name Stops

/* Not recommended */
.footer-item {
  padding:10px;
}

/* Recommended */
.footer-item {
  padding: 10px;
}

Declaration Block Separation

Always use a single space between the selector(s) and the opening brace that begins the declaration block. The opening brace should be on the same line as the last selector in a given rule.

/* Not recommended */
#example{
  margin: 1px;
}

#example
{
  margin: 1px;
}

/* Recommended */
#example {
  margin: 1px;
}

Selector and Declaration Separation

Always start a new line for each selector and declaration.

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}

/* Recommended */
a:focus,
a:active {
  position: relative;
  top: 1px;
}

CSS Quotation Marks

Use single-quotes instead of double-quotes for CSS declarations.

/* Not recommended */
html {
  font-family: "open sans", arial, sans-serif;
}

/* Recommended */
html {
  font-family: 'open sans', arial, sans-serif;
}