wojteklu

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules

csswizardry

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$spacing-unit: 24px;

$spacing-unit-tiny:  round(0.25 * $spacing-unit);
$spacing-unit-small: round(0.5  * $spacing-unit);
$spacing-unit-large: round(2    * $spacing-unit);

ryanflorence

onPage(/\/courses\/\d+\/settings/, function() {
  // do something
});

hasAnyRole('admin', function(hasRole) {
  if (hasRole) {
    // do something
  } else {
    // do something else
  }

dfadler

// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true)

  //http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
  $sprite-image: sprite-file($map, $sprite) 
  
  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
  $sprite-map: sprite-url($map)
  
  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position

chriseppstein

@mixin ie6 { * html & { @content } }

#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}

antsa

// Provides a mixin to define hyphenation
//
// Requires Compass
//
// (http://blog.fontdeck.com/post/9037028497/hyphens)
// (http://www.w3.org/TR/css3-text/#hyphenation)
//
// $value - The hyphenation property value. One of "none", "manual", "auto" or "all"
//
// Example .scss: