CSS Style Guide

Adapted from the Google HTML/CSS Style Guide and Dropbox (S)CSS Style Guide.

Licensed under CC-BY 3.0.

For generic rules applicable to both HTML and CSS, see General HTML/CSS Style Guide.

NOTE: All CSS in this project is "compiled" from SCSS, an extension of CSS which provides vastly improved levels of understandability and code efficiency. For more information, see their website.

General Rules

!important Declarations

Never use !important declarations. Ever.

If you really need to override a CSS selector, you can utilize CSS selector specificity. See this Smashing Magazine article for more information.

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 {}

Preferably you would use CSS "specificity" features to determine what page/container an item is inside, thus making it possible to use more generic names for classes/ids instead of "image-comments-container-item" or something absurdly long like that.

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. Also use lower case letters for color codes.

/* 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;
}

CSS Capitalization

Leave all CSS as lower-case, except for font names.

/* Not recommended */
#example {
  font-family: 'open sans', arial, sans-serif;
  font-size: 1.6EM;
}

/* Recommended */
html {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1.6em;
}