Conventions
Conventions include generic patterns that ensure that written code adheres to certain formatting conventions.

Code

  • Tabs or two-space indentation
  • Use shorthand for conditional statements
  • Always open braces on the same line as the previous statement and close braces on the same indent as the original function like so:
1
function textComponent() {
2
return {
3
name: "OSCA"
4
};
5
}
Copied!

Naming

  • Constructor functions should use the TitleCase
  • Variables, directories and methods should use the camelCase
  • Variables or elements with multiple words should always use an underscore between words.
1
const user_params = null;
Copied!
  • Private methods should start with a leading underscore to separate them from public methods
1
const _inputType = inputType;
Copied!
  • Abbreviations should be avoided please to avoid confusion
  • Comments should include enough information about what a part of code is supposed to do.
1
// Define default props of the TextBox component
2
3
TextBox.defaultProps = {
4
className: "",
5
disabled: false,
6
inputType: "text"
7
};
Copied!

Styling

This project uses the BEM Methodology with a camelCase style. Read the start guide here
BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks
Naming Rules:
1
blockName__elementName_modifierName_modifierValue
Copied!
  • Names are written in lowercase Latin letters.
  • Each word inside a name begins with an uppercase letter.
  • The block name defines the namespace for its elements and modifiers.
  • The element name is separated from the block name by a double underscore (__).
  • The modifier name is separated from the block or element name by a single underscore (_).
  • The modifier value is separated from the modifier name by a single underscore (_).
  • For boolean modifiers, the value is not included in the name.
Copy link