snapshot of the formatting section of Flippa's SASS styleguide

gistfile1.md

= 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]