Coding Standards

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

CSS

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;
  }
}

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%;
}

Fraction Values

Always remove zero prefix in fractions.

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

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');
}

Declarations

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

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

HTML

Indentation

Use two <Space>s to represent single indent.

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

Attributes and Names

Use lower-case letter, sort attributes alphabetically.

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

Boolean Attributes

Always remove values.

<foo bar baz='qux'>

Attribute’s Value

Always use double quote, even on empty value.

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

Void Elements

Do not add / before > in void elements.

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

<hr>