Соглашения по стилю кодирования

HTML

Порядок атрибутов в элементах (тегах) HTML
  • атрибуты angular
  • стандартные атрибуты элементов форм
  • стандартные атрибуты HTML
  • атрибут class
  • атрибут style (при крайней необходимости)

    <div [ng-attr] [html-attr] [class=] [style=]>
    <input [ng-attr] [input-attr] [html-attr] [class=] [style=]>
    

В HTML-тегах подключения элементов первым должен быть атрибут, указывающий на размещение ресурса src или href

<link [href] ...>
<script [src] ...>
CSS/LESS
    .app {
      .app-wrapper {
        .app-text-small { }
        .app-logo { }
        .app-container {
            .app-message-alert { }
        }
     }
   }
Именование HTML/CSS

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

В именах классов и идентификаторов используется дефис:

    <form name="order" class="form-order" id="form-order">
      <label for="order-name" class="label-name">Lable</label>
      <input ng-model="vm.order.name" ng-pattern="/^[a-z]+/" id="order-name"   class="form-control">
   </form>
javascript

В коде используются отступы в 2 пробела.

   if ( myString === 'cool' ) {
     console.log('yes');
   }

Имена конструкторов начинаются с заглавной буквы

  function Person(){
    this.name = 'user';
  }

  var user = new Person();

Для имен переменных используются соглашение о смене регистра символов (camel case)

// конструктор
function MyPerson(name){
  this.name = name;
}

// переменные и методы
var myVar = 100;

var calculateSum = function(){
  console.log(arguments);
}

MyPerson.prototype.getName = function(){
  return this.name;
}    

Глобальные переменные и константы именуются только заглавными символами

  var APP = {};
  var PI = 3.14;
  var LIMIT = 10;

При обозначение частых (private) и защищенных (protected) переменных и методов используется символ подчеркивания

 // v1
 var person = {
   getName: function(){
     return this._getFirst() + ' ' + this._getLast();
   },
   _getFirst: function(){
     //
   },
  _getLast: function(){
    //
   }
};

// v2
function doStaff(){

var args = arguments.length;
var result = 'Arguments count: ';

var do_ = function(){
  return args > 0;
}

if(do_) return result + args;
  return 0;
}

// angular
angular.module('app',[])
 .controller('Ctrl', function($scope){   
   // private
   var ctrl = this;

  // этот метод будет доступен только в контролере ($scope)
  ctrl.internalInit = function(){
     var private_ = true;     
     console.log('init complete', private_);
  };  

 // protected
 // этот метод будет доступен всем потомкам
  $scope.sendMessage = function(msg){
    console.log('message send',msg);
  };    
});

Для вывода сообщений в консоль используется сервис $log

  • для простых сообщений $log.info()
  • для ошибок и критических предупреждений $log.error()
  • для предупредительных сообщений $log.warn()
  • для всех остальных сообщений и вывода данных $log.log()

Ссылки: