Skip to content

Coding Conventions

Tong Lam edited this page Mar 20, 2024 · 6 revisions

Frontend

Html

Use Lowercase Element Names

DO THIS:

<body>
<p>This is a paragraph.</p>
</body>

NOT DO THIS:

<BODY>
<P>This is a paragraph.</P>
</BODY>

Close All HTML Elements

DO THIS:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

NOT DO THIS:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Use Lowercase Attribute Names

DO THIS:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

NOT DO THIS:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Always Quote Attribute Values

DO THIS:

<table class="striped">

NOT DO THIS:

<table class=striped>

Always Specify alt, width, and height for Images

DO THIS:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

NOT DO THIS:

<img src="html5.gif">

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

DO THIS:

<table class="striped">

NOT DO THIS:

<table class=striped>

Use Lower Case File Names

JavaScript

Naming Conventions

Always use the same naming convention for all your code. For example:

  • Variable and function names written as camelCase.
  • Global variables written in UPPERCASE.
  • Constants written in UPPERCASE.

Use const and let

Declare all local variables with either const or let. Use const by default, unless a variable needs to be reassigned. The var keyword must not be used.

Declared when needed, initialized as soon as possible

Do not mix quoted and unquoted keys

DO NOT DO THIS:

{
  width: 42, // struct-style unquoted key
  'maxWidth': 43, // dict-style quoted key
}

Template literals

Use template literals (delimited with `) over complex string concatenation, particularly if multiple string literals are involved. Template literals may span multiple lines.

No line continuations

DO THIS:

const longString = 'This is a very long string that far exceeds the 80 ' +
    'column limit. It does not contain long stretches of spaces since ' +
    'the concatenated strings are cleaner.';

DO NOT DO THIS:

const longString = 'This is a very long string that far exceeds the 80 \
    column limit. It unfortunately contains long stretches of spaces due \
    to how the continued lines are indented.';

Backend

Followed PEP 8 style guide, see: https://peps.python.org/pep-0008/. Pylint will help you follow python style guide.

Clone this wiki locally