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 implements 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 (file_exists($path)) {}

// :)
if (is_file($path)) {}

If you just want to check whether a path does exist, use stream_resolve_include_path instead of file_exists:

// :(
if (file_exists($path)) {}

// :(
if (is_dir($path) || is_file($path)) {}

// :)
if (stream_resolve_include_path($path)) {}

Use strtr instead of str_replace:

// :(
echo str_replace('a', 'b', $value);
echo str_replace('a', "", $value);
echo str_replace(['a', 'b'], ['c', 'd'], $value);
echo str_replace(['aa', 'bb'], ["", ""], $value);

// :)
echo strtr($value, 'a', 'b');
echo strtr($value, ['a' => ""]);
echo strtr($value, 'ab', 'cd');
echo strtr($value, [
    'aa' => "",
    'bb' => ""
]);

If you know that a path exists, use stream_resolve_include_path to normalize the path instead of realpath:

$path = stream_resolve_include_path($path);

If you just want to escape/un-escape HTML, use htmlspecialchars and htmlspecialchars_decode instead of htmlentities:

// :(
echo '<input value="' . htmlentities($value) . '">';

// :)
echo '<input value="' . htmlspecialchars($value) . '">';

Prefers static anonymous function if $this context is not used:

$every = static function(array $tokens, callable $fn) {
    foreach ($tokens as &$token) {
        $token = $fn($token);
    }
    unset($token);
    return $tokens;
};

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'"

Always store HEREDOC string in a variable to overcome our first home-made PHP minifier bug.

// :(
echo implode("\n", ['<b></b>', <<<HTML
  <div></div>
HTML
]);

// :)
$content = <<<HTML
  <div></div>
HTML;
echo implode("\n", ['<b></b>', $content]);