Anyone who has worked with me in the past knows I am a bit of a sucker for coding standards. Even if the code is technically really good, I find myself having less time for it if it is unreadable. I’d much rather be looking at pictures like the one above then someones horrible code!

Coding standards can be quite decisive amongst team members as they are usually very opinionated. However the benefits of them outweigh any team member bust ups! Teams use them to improve consistency between code, and to ensure better communication between developers. Below are my general web development coding standards, that I adopt when working on a project that has none.

General Web Development Coding Standards

  • DO use the coding standards provided by the framework you are using. If the framework you are using has it’s own coding standards/style, adopt that over your own personal preferences.
    • Do this because if another developer takes over some of your work they should be familiar with the coding standards/ practices of that framework.
    • Some frameworks, like CakePHP force users to adopt their coding style.
  • DO use a CSS Preprocessor when starting a new project from scratch. SASS or LESS. If your working with a team it is probably worth discussing which one to use as other developers will have
  • DO put all scripts at the bottom of the page before the close BODY tag.
  • DO put all links to stylesheets in the HEAD element.
    • This will speed up the page load and allow the document to render progressively.
  • AVOID using inline styles and on page javascript. Always link to separate stylesheets and script files. Benefits of this are:
    • Easier to maintain code.
    • Will speed up page load times as the browser will cache your CSS and JavaScript files, reducing the number of HTTP requests needed.
  • DO NOT use minified code on development servers.
  • DO use minified code on production environments.
  • DO NOT modify external code, you should try to override or extend it in your own code.  For example:
    • Bower components.
    • Composer vendor files.
  • DO NOT comment on every line.
    • // This is a counter
      $c = 0;
      
      // Create a new instance of a class
      $f = new SomeClass( $opt );
  • But DO use comments to describe the method, or more complex code, or just when you think its necessary.
  • and DO use descriptive variable/class/method names. – This way you reduce the need for comments and increase readability:
    • /**
       * This comment will describe the class, what it does, what 
       * it's dependancies are, and other metadata.
       */
      class Product extends Model {
      
          private $_price = 0;
      
          public setPrice( $price ){
      
              $this->_price = $price
          }
      }
      
      $numberOfProducts = 0;
      
      $product = new Product( $options );
      
      $numberOfProducts++;
      
      echo 'The product&rsquos;s price is ' . $product->getPrice();
  • DO use line spacing and white spacing to make your code more readable. It is acceptable to group lines of code together if they are related:
    • if($foo==0){$bar=1;}else{$bar=$foo;} // This is horrible
      
      // Parentheses are not required if your code is nicely spaced out.
      if( $foo )
          $bar = 1;
      
      else 
          $bar = $foo;

CSS Coding Standards

For CSS, Sass or Less I tend to use the Airbnb css coding styleguide. The only thing I usually ignore from their coding standards is their use of @extend. I do use @extend in personal projects but only for extending placeholders.

Javascript Coding Standards

Again I look to Airbnb and their Javascript coding styleguide where possible. However we are limited to what we can and cannot use by our target browsers.

PHP Coding Standards

If a framework has any coding standards, like CakePHP for example, then I will follow the frameworks coding styleguide, however if not then I use PSR-2.