The Basics

The goal of a style guide is to facilitate readability and organization of our code. These rules should be followed within reason; if a style rule ever makes your code more complex and/or difficult to understand, then it's probably not a great idea to use the rule in that case.

As with anything, however, you must first understand the rules in order to break them...

General

• Line length should be limited to 120 characters. Most modern IDEs allow you to set this automatically.
• JavaScript variables should be camelCased.
• Custom style rules should use the BEM naming convention.
  This article has a helpful breakdown of the philosophy behind BEM naming.

Styles

• The marketplace uses Sass in the SCSS format.
• In general, we try to follow Hugo Giraudel's guidelines for Sass.

Structure

• The marketplace is built using Vue.js as our JavaScript framework, and Element for UI components.
• We follow the Priority A and B rules provided in the Vue.js style guide.
• Vuex is used for state management.
• Vue Router is how we handle routing.
• We use Axios for formulating our AJAX calls.

Unit Testing

• We are using Jest for unit testing the front end.
• You should—within reason—aim for 100% coverage with your unit tests; realistically, however, the Marketplace front end repository should never drop below 75% coverage as a whole.