standards.md

Standards

When contributing to the frontend, ensure that all code written follows the following standards so that it is consistent with the rest of the project.

General Standards

• Variable, function, and method names should be descriptive. It should be easy to tell what the variable is for just from the name
• Code should be commented. All significant code blocks should have comments explaining what they do. All methods should be commented as well.
• Keep everything organized, logical and understandable. The easier the code is to read and understand, the easier it will be to maintain.

React Standards

• Only 1 component per file
• Use PascalCase for component names (ex: UserProfile.tsx)
• Use camelCase for non-component file names
• Use camelCase for folder names

CSS Standards

• Use soft tabs with a 2 space indent
• Use double quotes
• Use shorthand notation where possible.
• Put spaces after : in property declarations.
• Put spaces before { in rule declarations.
• Use hex color codes #000 unless using rgba().
• Use one line per property declaration.
• Always follow a rule with one line of whitespace.
• Always quote url() and @import() contents.
• Do not indent blocks.
• All ids, classes and attributes must be lowercase with hyphens used for separation (e.g .profile-picture and not .profilepicture)
• All id, class, and attribute names should be descriptive, and describe either what the content is or what styling is
• Comments should be used to explain anything that may be unclear at first glance