kaelig

CSS Coding Styleguide

• Use 2 spaces for indentation
• Avoid descendent selectors (.my-module p {…})
• With Sass avoid nesting too deeply
• Avoid attaching classes to elements (div.category {…})
• Avoid !important !!!
• Use percentages and box-sizing when possible
• Rely on the component library
• Try not to write any CSS if you can

kaelig

%myclass {
  color: blue;

  @media (min-width: 600px) {
    background: red;
  }
  @media (min-width: 800px) {
    font-size: 28px;
  }
}

kaelig

// Sass v3.2.3

test {
    margin: 0;
}

kaelig

$bootstrap: false !default;
$scaffold:  true  !default; // Output .span-n classes?
$selector-type: if($scaffold, ".", "%") !default;
$old-ie:   false !default;

$total-columns:   12   !default;
$gutter:          8px  !default;

$container-width: 100%  !default;
$min-width:       240px !default;

kaelig

@import "compass/utilities/sprites/base";

// General Sprite Defaults
// You can override them before you import this file.
$icon-sprite-base-class: ".icon-sprite" !default;
$icon-sprite-dimensions: false !default;
$icon-position: 0% !default;
$icon-spacing: 0 !default;
$icon-repeat: no-repeat !default;

kaelig

This gist demonstrates how to use Compass magic sprites in combination with HiDPI.

See how it's done

Credits: Images ©BBC News.

kaelig

# ~/.ackrc
--type-add=ruby=.haml
--type-add=php=.phtml
--type-set=tpl=.jsx
--type-add=js=.jsx,.js
--type-set=less=.less
--type-set=sass=.scss,.sass
--type-set=scss=.scss,.sass

kaelig

/**
 * Buttons Test: input, a, button
 */

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
a {

kaelig

Why Compass?

TL;DR: I definitevely don't have anything against Bourbon, and we can actually use it with Compass (Bourbon for most CSS3 and Compass for utilities, spriting, compilation & other functions). But not using Compass is missing a big advantage Sass has over LESS.

First, why NOT Compass

• Doesn't work with libsass (yet — I read they plan on supporting libsass, probably later this year)
• needs Ruby (for now), and installs the chunky_png gem
• Slow compilation (because parsing image sizes, assembling sprites… actually takes time)

kaelig

/* ==========================================================================
   Text exposed utility
   ========================================================================== */

/**
 * Hides/shows text (use case: "read more" link)
 *
 * When `u-textExposed` has class `u-textExposed--expose`:
 * Shows `u-textExposed-show`
 * Hides `u-textExposed-hide`