sass-site/source/styleguide/code.html.haml

---
title: Code Style Guide
---

%p.introduction
  If you would like to contribute to this website's code, please adhere to the
  following code style guidelines.

:markdown
  - Please try to keep lines at a maximum of 78 characters.
  - Favor clarity over brevity in naming anything.
  - Pages end with `.html.haml`, `.html.erb`, `.html.md`, etc.
  - Partials and layouts end with `.haml`, `.md`, `.erb`, etc.

  ## Markup
  For the most part, we use [Haml](http://haml.info/) and
  [Markdown](http://daringfireball.net/projects/markdown/) for writing markup.
  If you need to use regular HTML anywhere, write HTML5, but favor a strict
  XHTML style:

  - Use well-formed markup; elements are nested properly and do not overlap.
  - Write elements and attributes in lowercase.
  - Quote all attributes.
  - Self-close empty elements with a space before the trailing slash:
    (`<br />`)

  ## Style
  This website uses Sass (duh) in the newer SCSS syntax. We also use the
  following extensions:

  - [Compass](http://compass-style.org/)
  - [Susy](http://susy.oddbird.net/)
  - [Breakpoint](http://breakpoint-sass.com/)

  Make sure you're using the mixins and such that they have to offer before
  rewriting something, unless you can justify otherwise.

  - Use hyphenated class names (no camelCase or snake_case).
  - For naming, use the general-to-specific approach. See
    [this article](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-name-your-sass-variables-modularly/)
    for more details.
  - Avoid nesting too deep.
  - Write comma-delimited selectors on separate lines.