Naming Conventions

Naming conventions and their reasons.

Table of Contents
  1. CSS
    1. Selector
  2. File
    1. Extension
    2. Name
  3. Folder
    1. Name
  4. HTML
    1. Attribute
    2. Entity
    3. Name
  5. JavaScript
    1. Class
    2. Constant
    3. Function
    4. Variable
  6. JSON
    1. Attribute
  7. PHP
    1. Class
    2. Constant
    3. Function
    4. Variable
  8. SQL
    1. Column
    2. Table
  9. YAML
    1. Attribute

In general, just follow what has become the writing style of that language. For example, CSS and HTML use kebab-case style, JavaScript and PHP use camelCase, MACRO_CASE, PascalCase, and snake_case styles.

CSS

Selector

Use kebab-case style.

#foo-bar-baz {}
.foo-bar-baz {}

:root {
  --foo-bar-baz: 10px;
}

File

Extension

Use lowercase style.

  • Prefers .jpeg when paired with .apng.
  • Prefers .jpg when paired with .png.
  • Prefers .md over .mkd, .markdown and other alternatives.
  • Prefers .yaml when paired with .html or .json.
  • Prefers .yml when paired with .htm or .ini.
.css
.gif
.html
.jpg
.js
.mjs
.mp3
.mp4
.php
.png
.scss
.yaml

Name

Use kebab-case style.

foo-bar-baz.txt

Folder

Name

Use kebab-case style.

foo-bar-baz

HTML

Attribute

Use kebab-case style. If they are native attributes, use the lowercase style.

<form novalidate></form>
<form-custom no-validate></form-custom>

Entity

Use lowercase style, unless it requires using PascalCase characters.

&#x5b;&#x5b;foo-bar&#x5d;&#x5d;
&Tab;&Tab;foo-bar
&#x5b;&#x5b;/foo-bar&#x5d;&#x5d;

Name

Use kebab-case style. If they are native elements, use the lowercase style.

<textarea></textarea>
<text-area></text-area>

JavaScript

Class

Use PascalCase style for the class name, use camelCase for the class methods and properties.

class ClassicEditor extends Editor {
    constructor() {}
    getValue() {}
    setValue() {}
}

Constant

Use MACRO_CASE style when holding primitive values. Use camelCase style when holding object.

const ENTER_KEY = 'Enter';
const ENTER_KEY_CODE = 13;

const classicEditor = new ClassicEditor;

Function

Use camelCase style.

function classicEditor(state) {
    return new ClassicEditor(state);
}

Variable

Use camelCase style.

let enterKey = 'Enter';
let enterKeyCode = 13;

JSON

Attribute

Use either camelCase or kebab-case style. Personally, I would prefer with kebab-case. However it may require special handling when it comes to accessing the properties after it has been converted to a JavaScript or PHP object.

PHP

Class

Use PascalCase for the class names, use camelCase for the class methods and properties. If class name, class method or class property represent abbreviation, use UPPERCASE. Class names and methods are case-insensitive in PHP so you don’t have to worry about its usage in real life. Users are free to use their personal preferences.

class HTTP {} // :)
class Http {} // :(
class http {} // :(

class MechaCMS {} // :)
class MechaCms {} // :(
class Mechacms {} // :(
public function getURL() {} // :)
public function getUrl() {} // :(
public function geturl() {} // :(

public function ID() {} // :)
public function Id() {} // :(
public function id() {} // :(

Constant

Use MACRO_CASE style.

Function

Use snake_case style. Function names are case-insensitive in PHP so you don’t have to worry about its usage in real life. Users are free to use their personal preferences. You may make two function name with the same feature to support more user preferences.

function URL(...$lot) {
    return new URL(...$lot);
}

function u_r_l(...$lot) {
    return URL(...$lot);
}

Variable

Use snake_case style. Try to avoid abbreviations unless it is a single letter. You may make two global variable name with the same reference to support more user preferences.

$GLOBALS['u_r_l'] = $GLOBALS['url'] = $u_r_l = $url = new URL;

SQL

Column

Use kebab-case style.

Table

Use kebab-case style.

YAML

Attribute

Use kebab-case style.

Editor Settings

Various settings for code editors that might be used to develop Mecha.

Naming Conventions

Naming conventions and their reasons.