LESS Style Guide

Indentation

• Indent is two spaces.

Quotation marks

• Single quotes only.

Naming

• We use only classes, no IDs in stylesheets (ID symbol — # — is kept for mixin naming only).
• Class names contain only lowercase hyphen-separated alphanumerical words. Regex is /([a-z0-9]+)(-[a-z0-9]+)*/.
• Minimum length of a class name is 2 symbols, maximum is 24.
• Naming semantics should have name first and modifications last (e.g. fade and fade-fast).
• Classes, pseudo-classes, etc. goes in the alphabetical order:
  • .a.b.c:hover:visited is good;
  • .a.c.b:visited:hover is bad.

Extend and mixins

• Extend of basic classes is preferred to mixins (that reduces resulting CSS size).
• If there are no parameters, create a basic class which contains logic and extend it from wherever you want.
• Use extend in the following case:

// Basic class
.user-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
// Final class which uses that behavior
.target-class {
    &:extend(.user-select-none);
}

• Use mixins when you have parameters (parentheses are required):

#bordered(@width: 1px; @color: #000) {
    border: solid @width @color;
}
.menu button {
    #bordered(@color: @color-waves-blue);
}
.warning {
    #bordered(2px; #f00);
}

• Extend and mixin directives are always in the beginning of a rule, separated by a new line after each group of them:

.some-selector {
    &:extend(.some-base-class);
    &:extend(.some-other-base-class);

    #some-mixin(#fff);
    #some-other-mixin(); // Using default parameters

    background-image: url('...');
}

• Order is: first extend, then mixins, then selector's own rules.

Variables

• Tend to use only vars from a global scope or those which are declared within a file (not inside a scope).

Paths

• Use variables for path prefixes. For example:

@images: '../img';
.selector {
  background: url('@{images}/image.png');
}

• All paths should be quoted.

Miscellaneous

• Do not use "extend all".
• Consider using LESS docs for reference if you have doubts. Do use it if you haven't.