Coding Convention

My Coding Convention Comment Tag HTML Comment Tag [<!-- Write your comments here -->] CSS Comment Tag [/* Write your comments here *...

My Coding Convention

Comment Tag

HTML Comment Tag

[<!-- Write your comments here -->]

CSS Comment Tag

[/* Write your comments here */]

JavaScript Comment Tag

[// Write your single comments here]

[/* Write your multiple-line comments here */]

Naming Convention

Follow S-I-D Rule:

• Short: a name must not take long to type and, therefore, remember;
• Intuitive: a name must read naturally, as close to the common speech as possible;
• Descriptive: a name must reflect what it does/possesses in the most efficient way.

File Naming Convention

Use lower case url slug (most web servers are case-sensitive when it comes to handling files).
rangseyhome-log.jpg

HTML Naming Convention

HTML tag and HTML style attribute

HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but use lowercase (stricter document types like XHTML demands lowercase).
The HTML style attribute has the following syntax:
<tagname style="property:value;">
Use space to separate each combination of property and value.
For color hex code, use lower case.
<div style="color: #0000cd; background-color:#ffffff;"></div>

HTML class attribute and HTML id attribute

Follow as style attribute, use lower case and separate each word of class or id by hyphen.
<div style="color:blue; background-color:#ffffff;" class="message-box" id="message-box"></div>

JavaScript Naming Convention

A/HC/LC Pattern
prefix? + action (A) + high context (HC) + low context? (LC)
Actions: get, set, reset, remove, delete, compose, handle
Prefixes: is, has, should, min, max, prev, next
Singular and Plurals

const friend = 'Bob';
const friends = ['Bob', 'Tony', 'Tanya'];

Naming Convention for Variables

Use camel case.

For booleans, use prefix is or has.
var dogName = 'Droopy';

var hasOwner = true;

Naming Convention for Functions

Use lower snake case
function get_name(dogName, ownerName) {
    return '${dogName} ${ownerName}';
}

Naming Convention for Classes

Use pascal case.
class DogCartoon {
    constructor(dogName, ownerName) {
        this.dogName = dogName;
        this.ownerName = ownerName;
    }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

Naming Convention for Components

Use pascal case.
function DogCartoon(roles) {
    return (
        < div >
        < span > Dog Name: { roles.dogName } < /span>
        < span > Owner Name: { roles.ownerName } < /span>
        < /div>
    );
}

<div

<DogCartoon

    roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }}

/>

</div>

Naming Convention for Methods

Use camel case.
class DogCartoon {
    constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
    }
    getName() {
        return '${this.dogName} ${this.ownerName}';
    }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

console.log(cartoon.getName());

// "Scooby-Doo Shaggy"

The above conventions are just my prefer style. You can also learn and consider your own style:

• w3schools
• A Useful Framework for Naming Your Classes, Functions, and Variables
• Naming cheatsheet
• 10 JavaScript Naming Conventions Every Developer Should Know