Style Guide

Note

Our style guide is based on Mozilla’s, Bracket’s and Pocoo’s guides.

HTML

Classes and id’s in HTML use all lower-case with dashes (-), not camelCase or under_scores:

Do this:

<div id="search-results">
<span class="title-wrapper">

Not this:

<div id="searchResults">  // Don't use camel-case for ids
<span class="title_wrapper"> // Don't use underscore

Always use double quotes (”) to border attributes.

Do this:

<div id="searchResults">

Not this:

<div id='searchResults'>

Javascript

  • Use 4 space indents (spaces, no tabs)

  • Must pass JSLint. Meaningful defaults for JSLint is

    /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
    /*global $ */
    

    Note

    The above recommendation has one caveat.

    JSLint warns about lines consisting entirely of whitespace, but we ignore those warnings. The JSLint feature built into Brackets filters out these warnings automatically.

    Note

    JSHint instead? we might configure it with a single .jshintrc file

  • Line length

    79 characters with a soft limit of 84 if absolutely necessary. Try to avoid too deeply nested code by cleverly placing break, continue and return statements.

  • General Naming and Syntax

    Variable and function names use camelCase (not under_scores):

    Do this:

    var editorHolder;
    function getText();
    

    Not this:

    var editor_holder; // Don't use underscore!
    function get_text(); // Don't use underscore!
    

    Never assign multiple variables on the same line.

    Don’t do this:

    var a = 1, b = 'foo', c = 'wtf';
    
  • Private variables

    Use _ prefixes on private variables/methods: Do this:

    var _privateVar = 42;
    function _privateFunction()
    

    Not this:

    var privateVar = 42; // Private vars should start with _
    function privateFunction() // Private functions should start with _
    
  • Arrays and Objects

    Use [] to assign a new array, not new Array().

    Use {} for new objects, as well.

    Two scenarios for [] (one can be on the same line, with discretion and the other not so much):

    // Okay on a single line
    var stuff = [1, 2, 3];
    
    // Never on a single line, multiple only
    var longerStuff = [
        'some longer stuff',
        'other longer stuff'
    ];
    
  • Working with jQuery

    Use $ prefixes on variables referring to jQuery objects:

    Do this:

    var $sidebar = $("#sidebar");
    

    Not this:

    var sidebar = $("#sidebar"); // Use '$' to prefix variables referring to jQuery objects
    
  • Use semicolons:

    Do this:

    var someVar;
    someVar = 2 + 2;
    

    Not this:

    var someVar   // Missing semicolon!
    someVar = 2 + 2   // Missing semicolon!
    
  • Operators

    Always use === for comparison. The only exceptions are when testing for null and undefined

    if (value !== 0) {
        console.log('value can not be undefined');
    }
    

    Try to avoid ternary, especially if it would use multiple lines:

    This is OK:

    return user.isLoggedIn ? 'yay' : 'boo';
    

    Not this:

    var foo = (user.lastLogin > new Date().getTime() - 16000) ? user.lastLogin - 24000 : 'wut';
    
  • Quoting

    Use double quotes in JavaScript. If a JavaScript string literal contains code within it, use single quotes within the string to avoid escaping.

    Do this:

    var aString = "Hello";
    someFunction("This is awesome!");
    
    var htmlCode = "<div id='some-id' class='some-class'></div>";
    

    Not this:

    var aString = 'Hello'; // Use double quotes!
    someFunction('This is awesome!'); // Use double quotes!
    
    var htmlCode = '<div id="some-id" class="some-class"></div>'; // Use double quotes!
    var htmlCode = "<div id=\"some-id\" class=\"some-class\"></div>"; // Within string, use single quotes!
    
  • Commenting

    All comments should be C++ single line style

    //comment.
    

    Even multiline comments should use // at the start of each line

    Use C style /* comments */ for notices at the top and bottom of the file

    Annotations should use the /** annotation */ style

    /** This is my function
    
    @param arg1 string The first argument
    @return boolean
    */
    var myFunc = function (arg1) {
        return true;
    };
    

    Annotate all functions

CSS

Use Less

Python

Use the Pocoo style guide

In addition:

  • Lint/PEP-8 compliance (Use Pylint)

Project Versions

Table Of Contents

Previous topic

Welcome to Pulilab Coding Guidelines’s documentation!

Next topic

Django Guidelines

This Page