Hello, and welcome to this project repository by Virtual Tech School! This project is a community maintained responsive clone of YouTube and this document contains the coding standards that needs to be followed in order to contribute to the project.
-
Always use 4 spaces for indentation!
Instead of
<div> <p>This is a paragraph!</p> <ol> <li>This is a list item</li> </ol> </div>Do
<div> <p>This is a paragraph!</p> <ol> <li>This is a list item</li> </ol> </div> -
Always use "double quotes" for attirbutes and values.
Instead of
<div class='div-container'></div>Do
<div class="div-container"></div> -
Use lowercase letters for tags, attributes, values, url(s), etc.
Instead of
<DIV CLASS="DIV-CONTAINER"></DIV>Do
<div class="div-container"></div> -
Remove trailing white spaces (if any).
-
Don't add spaces before and after equal to (=) sign.
Instead of
<div class = "div-container"></div>Do
<div class="div-container"></div> -
Add blank lines between different sections of code.
Example
<div class="navbar"> ... </div> <div class="side-bar"> ... </div> <div class="header"> ... </div> <div class="body"> ... </div> <div class="footer"> ... </div> -
Give a space between attributes.
Example
<input class="full-name" placeholder="Enter your name" /> -
Don't give more than 1 blank line anywhere in the code.
-
Import all style sheets and scripts (CDN) in the
<head>tag only. -
Add comments before sections.
Example
<!-- Navbar --> <div class="navbar"> ... </div> <!-- Sidebar --> <div class="side-bar"> ... </div> <!-- Page header --> <div class="header"> ... </div> <!-- Main content --> <div class="body"> ... </div> <!-- Footer --> <div class="footer"> ... </div> -
Any additional JS scripts created should be added at the end of the body.
-
Always quote attribute values.
Instead of
<div class=div-container></div>Do
<div class="div-container"></div> -
Specify
altattribute for images. -
Use semantic element tags instead of
divtags. Reference here. -
Omit
typeattribute for stylesheets and scripts. -
Use meaningful
classandidnames in HTML. -
Use hyphens
-instead of underscores_in id(s) and classes. -
Avoid using type selectors with class names in CSS and JS unless absolutely necessary.
Instead of
div.container {}Do
.container {} -
There should never be multiple elements with same
id. Eachidshould only be associated to one element. They are meant to be unique. -
Avoid using "!important" declaration as much as possible.
-
Write CSS properties in alphabetical order.
-
Use a space after property name's colon :
-
Use shorthand properties wherever possible in CSS.
Instead of
.container { margin-top: 1px; margin-bottom: 1px; margin-left: 1px; margin-right: 1px; }Do
.container { margin: 1px; } -
Avoid using inline CSS.
-
HTML attributes should be in the following precedence order -
src,for,type,href,valueclassid,nametitle,altdata
-
Use camelCase for variable/function names.
-
Put 1 space before and after any operator.
-
Use 4 spaces for indentation.
-
Use semicolon ; for simple statements.
-
For compound statements and objects, put curly bracket { after a space at the end of the first line, and closing bracket } in a new line.
Example
for (let i = 0; i < 10; i++) { ... } -
For objects, put a space after the colons : and don't put a comma , after the last property
Example
let newObj = { property1: value1, property2: value2 }; -
End an object with a semicolon.
-
Initialise a variable while declaring it (there may be a few edge cases where this won't be applicable).
-
Avoid using
varto declare variables. Useletandconst.
- Use
rowandcolclasses for any<div>or semantic HTML tags created. - Each and every
colshould always be inside of arow. - There should always be values for -
- col-sm-*
- col-md-*
- col-lg-*
- Define them in the same order and mentioned above for consistency.
Refer to the following link for guidelines.