mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 18:37:35 +01:00
46 lines
1.6 KiB
Plaintext
46 lines
1.6 KiB
Plaintext
---
|
|
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.
|
|
|
|
|