Coding Guidelines

We are extremely strict about the coding style and insist that contributors adopt the same style.

In general, these guidelines follow the Mozilla Webdev Bootcamp JS/CSS Style Guides found here:
http://mozweb.readthedocs.org/en/latest/js-style.html
http://mozweb.readthedocs.org/en/latest/css-style.html

General

• Use spaces, not tabs.
• Use 4 spaces for indentation in JavaScript files and 2 spaces for indentation in HTML and CSS/Stylus files.
• Use single quotes in JavaScript files/statements and CSS stylus files, and double quotes for attributes in HTML files.
• camelCase for variables and function names.
• Newline at end of files.

HTML

• The nunjucks templating language is being used to dynamically generate markup.
• Plain text being used in template files have to be l10n localised using {{ _('<text here>') }}. Here's an example: <h2>{{ _('Games you are playing') }}</h2>.
• Space after {{, {% and before }}, %}.
• The full path for media files can be obtained using the helper function: {{ media(<path within media folder>) }}.
• Nunjuck comments are preferred over HTML comments.
• Omit the / in self-closing tags (e.g. img, br) in HTML5.
• Use 2 spaces for indentation.
• Use double quotes for HTML attributes.
• Use single quotes for nunjucks templating code (because it is considered JavaScript).

CSS

• We use the CSS pre-processor Stylus for efficient writing of CSS code. However, note that an older version (0.32) is being used, so braces are still required.
• Make your CSS edits to the .styl files only. Upon modification to a *.styl file, the corresponding *.styl.css file will be compiled. Note that the .styl.css files are being gitignore'd and changes made in them will not be tracked.
• We insist that CSS properties within a selector should be listed in alphabetical order. Else, you will receive a 🍟 comment (meaning wrong-order) when your code is being reviewed.
• Hex values for colors should be written in lower-case.
• No inline-styles please.
• Do not add units to 0 values.
• If a particular value is being used in many places, add them to the variables.styl file.
• Use 4 spaces for indentation.
• Use single quotes if needed.

JavaScript

• We write modular JavaScript using require.js to keep our JavaScript code fast and high quality.
• Use event delegates for attaching event listeners to a page; see here. Define event listeners outside of the builder callback so that the event listeners don't have to be created/destroyed on every page load/unload.
• Plain text strings have to be localized using gettext('<text>').
• If $(this) is being used more than once within a function, create a local variable var $this = $(this);.
• Place a dollar sign before any variable that is a JQuery Object
• Semi-colons at the end of line.
• Use the one true brace indentation style. Do not start opening braces on a new line.