linting.md

Linting

Running the lint task

Linting rules

We use the following rules when linting files:

Use soft tabs (2 spaces)

Write each property on its own line

Bad:

.selector {border: 0; padding: 0;}

Good:

.selector {
  border: 0;
  padding: 0;
}

Use variables for colours not HEX values in selectors rules, unless in variables.

Bad:

.selector {
  color: #005eb8;
}

Good:

.selector {
  color: $colour_nhsuk-blue;
}

Colours defined as variables should be in lowercase and in full length

Bad:

$white: #FFF;

Good:

$white: #ffffff;

Use border: 0 not none to denote no border

Bad:

.selector {
  border: none;
}

Good:

.selector {
  border: 0;
}

Avoid using ID selectors

Bad:

#content {
  ...
}

Good:

.nhsuk-wrapper {
  ...
}

Separate rule, function, and mixin declarations with empty lines

Bad:

p {
  margin: 0;
  em {
    ...
  }
}
a {
  ...
}

Good:

p {
  margin: 0;

  em {
    ...
  }
}

a {
  ...
}

Use no more than 3 levels of nesting

Bad:

.nhsuk-breadcrumb {
  ...
  &__item {
    ...
  }
}

Good:

.nhsuk-breadcrumb {
  ...
}

.nhsuk-breadcrumb__item {
  ...
}

Don't use extends, use mixins

Bad:

@extend %contain-floats;

Good:

@include clearfix;

Allow max 3-rule property shorthand if possible

Bad:

margin: 1px 2px 3px 2px;

Good:

margin: 1px 2px 3px;

Files should always have a final newline

Commas in lists should be followed by a space

The basenames of @imported SCSS partials should not begin with an underscore and should not include the filename extension

Bad:

@import '_foo.scss';
@import '_bar/foo.scss';

Good:

@import 'foo';
@import 'bar/foo';

Properties should be formatted with a single space separating the colon from the property's value

Bad:

.foo {
  content:'bar';
}

Good:

.foo {
  content: 'bar';
}

Operators should be formatted with a single space on both sides of an infix operator. These include +, -, *, /, %, ==, !=, >, >=, <, and <=

Bad:

.selector {
  margin: 5px+15px;
}

$foo: 1;
$bar: 3;

.selector {
  margin: $foo+$bar+'px';
}

$foo: 1+1;
$bar: 2-1;

@if $foo==$bar {
  $baz: 1;
}

@if ($foo!=$bar) {
  $baz: 1;
}

Good:

.selector {
  margin: 5px + 15px;
}

$foo: 1;
$bar: 3;

.selector {
  margin: $foo + $bar + 'px';
}

$foo: 1 + 1;
$bar: 2 - 1;

@if $foo == $bar {
  $baz: 1;
}

@if ($foo != $bar) {
  $baz: 1;
}

Avoid whitespace between parentheses and the arguments

Bad:

@function foo( $bar, $baz ) {
  @return $bar + $baz;
}

Good:

@function foo($bar, $baz) {
  @return $bar + $baz;
}

Functions, mixins, variables, and placeholders should be declared with all lowercase letters and hyphens instead of underscores

Bad:

@mixin FONT_STACK() {
  font-family: $nhsuk-font-stack;
}

Good:

@mixin font-stack() {
  font-family: $nhsuk-font-stack;
}

Omit length units on zero values

Bad:

.selector {
  margin: 0px;
}

Good:

.selector {
  margin: 0;
}

Property values and variable declarations should always end with a semicolon

Bad:

.selector {
  margin: 0
}

$my-example-var: value

Good:

.selector {
  margin: 0;
}

$my-example-var: value;

Don't write trailing zeros for numeric values with a decimal point

Bad:

.selector {
  font-size: 0.50em;
}

Good:

.selector {
  font-size: 0.5em;
}

Remove trailing whitespace

More write up on supported rules.

---

Next: Testing