Coding Standards

Mecha mostly contains CSS, HTML, JavaScript, JSON, PHP, and YAML files.

CSS

Colors

Always use HEX color code to declare a solid color, and RGBA color code to declare a color with opacity. Always use lower-case letter, and use the shortest color code version:

foo {
  bar: #b4d455;
  baz: #def;
  qux: rgba(255, 255, 0, .5);
}

Declarations

Sort declarations alphabetically, unless you want to override the previous declaration:

foo {
  bar: 1px baz #000;
  bar-baz: 0;
  foo: 1px;
  qux: 1px;
}

Fraction Values

Always remove zero prefix in fractions:

foo {
  bar: .25em .5em;
  baz: 1.25em;
}

Indentation

Use two <Space>s to represent single indent:

@foo bar {
  foo {
    bar: 1px;
  }
}

Key-Value Pairs

Add a <Space> after colon:

@foo (bar: baz) {
  foo {
    bar: baz;
  }
}

Pseudo Classes

Pseudo classes don’t have to be in alphabetical order. In common, they will be ordered like this:

foo {}
foo:focus {}
foo:hover {}
foo:active {}

But you can also order them like this to make sure that focus state will remain as-is when hovered:

foo {}
foo:hover {}
foo:focus {}
foo:active {}

Be sure to put disabled states at the end, so it will be easier to override other states:

foo {}
foo:hover {}
foo:focus {}
foo:active {}

foo:valid {}
foo:invalid {}

foo:read-only {}
foo:disabled {} 

Selectors

Add a line-break after comma, sort selectors alphabetically:

h1,
h2,
h3,
h4,
h5,
h6 {}

Use single quote for attribute selector value, and for non-empty string value. Use double quote for empty string value:

[foo='bar'] {
  baz: "";
  qux: foo('bar');
}

Semi-Colon

Ensure semi-colon at the end of declaration:

foo {
  bar: 1px;
  baz: 1px;
}

Zero Values

Remove unit in zero values except 0% and 0deg:

foo {
  bar: 0 0 1px 1px;
  baz: 0%;
}

HTML

Attributes and Names

Use lower-case letter, sort attributes alphabetically:

<foo bar="1" baz="1" qux="1">

Attribute’s Value

Always use double quote, even on empty value:

<foo bar="" baz="1">

Boolean Attributes

Always remove values:

<foo bar baz='qux'>

Indentation

Use two <Space>s to represent single indent:

<foo>
  <bar></bar>
  <baz></baz>
</foo>

Void Elements

Do not add / before > in void elements:

<img alt="" src="/photo.jpg">

<hr>

JavaScript

Comparisons

Use Yoda style comparison for equal/not-equal comparison to quickly detect typos:

if (-1 !== foo.indexOf(bar)) {}

Indentation

Use four <Space>s to represent single indent:

function foo(bar = 'baz') {
    return bar ?? 'qux';
}

Variables

Join multiple variables, unless its indentation looks ugly such as when used with const. Sort them aplhabetically where possible:

let bar = 1,
    baz = 2,
    foo = 3;

const bar = 1;
const baz = 2;
const foo = 3;

PHP

Comparisons

Use Yoda style comparison for equal/not-equal comparison to quickly detect typos:

if (false !== strpos($foo, $bar)) {}

Indentation

Use four <Space>s to represent single indent:

function foo(string $bar = 'baz') {
    return $bar ?? 'qux';
}