snapshot of the formatting section of Flippa's SASS styleguide

= Flippa CSS Styleguide =

== CRITICAL: Regenerating Stylesheets for deployment ==

If you edit any stylesheets in app/stylesheets, you must run the following command from the project's root:

$> bundle exec compass compile

== Basic Formatting ==

MINIMAL selectors. Use as little specificity as required to target your element(s). No more or less.
#id selectors are only to be used to style the element directly, not in descendant selectors.
!important is banned. Except NEVER.
One selector per line.
opening curly brace on new line.
one blank line between each declaration block.
2 space (soft)tabbing.

=== Comments ===

No ASCii art comments.
Use single line comments (eg: // this is a thing)
Single space after '//' first letter of comment is a capital letter (improves legibility for eye-scanning)

=== SASS features ===

SCSS format only (curly braces are required)
any @include calls must be first line of declaration, if at all possible
Variables are to be declared in _variables.scss only
Mixins and functions should be declared in _functions.scss
Colour variables are prefixed with $c_
Typography variables are prefixed with $f_
Dimension variables are prefixed with $d_
Only use darken(color, 10%) or lighten(color, 10%) for borders, hover effects or similar minor decoration. If you need more than 10% change, select and define a new colour (or get Andrew to do it)
Encapsulate features with a parent class, for ease of refactoring (eg: delete the entire block when feature is redesigned)

[example]

// Section comment, eg: "Header"

.classname element,
.second selector
{
  @include box-shadow(1px 1px 1px #fff);
  background:#eee; 
  padding:$d_space;
  margin:$d_space 0 $d_space * 2;
  font: $f_body_shorthand;

  p
  {
    font-family:"Comic Sans", CurlzMT, Courier, fantasy;
  }
}

[/example]

andrewk/gist:4129315