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:

.button {
  background-color: #b4d455;
  border-color: rgba(255, 255, 0, .5);
  color: #def;
}

Declarations

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

.button {
  border: 1px solid #000;
  border-top-width: 0;
  margin-left: 1px;
  margin-right: 1px;
}

Fraction Values

Always remove zero prefix in fractions:

.button {
  margin: 1.25em;
  padding: .25em .5em;
}

Indentation

Use two <Space>s to represent single indent:

@media print {
  .hidden-print {
    display: none;
  }
}

Key-Value Pairs

Add a <Space> after colon:

@media (max-width: 1024px) {
  body {
    font-size: 80%;
  }
}

Pseudo Classes

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

.button {}
.button:focus {}
.button:hover {}
.button:active {}

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

.button {}
.button:hover {}
.button:focus {}
.button:active {}

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

.input {}
.input:hover {}
.input:focus {}
.input:active {}

.input:valid {}
.input:invalid {}

.input:read-only {}
.input: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:

[rel='nofollow']::before {
  background-image: url('./image.jpg');
  content: "";
}

Semi-Colon

Ensure semi-colon at the end of declaration:

body {
  margin-bottom: 1px;
  margin-top: 1px;
}

Zero Values

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

body {
  margin: 0 0 1px 1px;
  margin-top: 0%;
}

HTML

Attributes and Names

Use lower-case letter, sort attributes alphabetically:

<input class="input" id="input:0" type="text">

Attribute’s Value

Always use double quote, even on empty value:

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

Boolean Attributes

Always remove values:

<button disabled type="submit">

Indentation

Use two <Space>s to represent single indent:

<ul>
  <li></li>
  <li></li>
</ul>

Void Elements

Do not add / before > in void elements:

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

JavaScript

Comparisons

Use Yoda notation in equal/not-equal comparison to quickly detect typos:

if (-1 !== pairs.indexOf(pair)) {}

Indentation

Use four <Space>s to represent single indent:

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

Operators

Always add a <Space> around operators:

let value = a + b * (1 / (c - 2));

let value = a + 'asdf' + b;

value += 'asdf';
value += 'asdf';

Strings

Use single quote for non-empty string or for string that contains " character, so you don’t have to escape. Use double quote for empty string or for string that contains ' character, so you don’t have to escape:

'asdf'
"asdf's"
""
'"asdf"'
'"asdf\'s"'
"'asdf'"
"'asdf\"s'"

Variables

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

let bar = 1,
    baz = 2,
    x, y, z;

const bar = 1;
const baz = 2;

PHP

Classes

Order constants, methods and properties alphabetically, including the visibility state:

class Foo extends A, B, C {
  private function _internal() {}
  public function get() {}
  public function let() {}
  public function set() {}
  public function __construct() {}
  public static function __callStatic() {}
}

Comparisons

Use Yoda notation in equal/not-equal comparison to quickly detect typos:

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

Functions

• Use is_dir or is_file instead of file_exists.
• If you just want to check whether a path does exist, use stream_resolve_include_path instead of file_exists.
• Use strtr instead of str_replace.
• If you know that a path exists, use stream_resolve_include_path to normalize the path instead of realpath.
• If you just want to escape/un-escape HTML, use htmlspecialchars and htmlspecialchars_decode instead of htmlentities.

Indentation

Use four <Space>s to represent single indent:

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

Operators

Always add a <Space> around operators:

$value = $a + $b * (1 / ($c - 2));

$value = $a . 'asdf' . $b;

$value .= 'asdf';
$value .= 'asdf';

Strings

Use single quote for non-empty string or for string that contains " character, so you don’t have to escape. Use double quote for empty string or for string that contains ' character, so you don’t have to escape:

'asdf'
"asdf's"
""
'"asdf"'
'"asdf\'s"'
"'asdf'"
"'asdf\"s'"