Style Guide

The scratch-www codebase is, for the most part, divided into two sections –

• Views – specific, unique pages of Scratch
• Components – reusable pieces of code that are used/implemented in multiple pages or multiple other components

Our SCSS and JSX files are tightly coupled – each component/view is a directory containing both the React code and the styling for that specific item.

SCSS Coding Style

We use sass-lint to maintain formatting in our SCSS files. This library can be integrated with a number of different text editors and IDEs.

Naming conventions for SCSS should be semantic – rather than naming classes based on the way something will appear in the browser, name it based on the type of content it is going to contain.

If you are encountering yourself using specific formats more than once in a number of locations, try to come up with a general rule for those formats that can be inherited at lower levels (i.e. reduce duplication of code).

Javascript/JSX Coding Style

We use ESLint to maintain formatting in our Javascript/JSX files. To understand the rules that we have put in place for our linter, please see our .eslintrc file, which prescribes them. ESLint is easy to integrate with many text editors and IDEs.

Please use camelcase for naming multi-word variables, rather than underscores.

Docstrings and comments

It is best practice to include docstrings with any new methods to describe what they do, and how. We generally try to use the jsdoc conventions for docstrings. You may notice a lack of docstrings in many areas of the repo – please feel free to add some if you are working on an existing method that might not have any :).