When writing code for use with Rivet, please follow the guidelines on this page.

• All markup must be valid HTML5
• Use semantic HTML elements to represent content when possible
• Use Accessible Rich Internet Applications (ARIA) attributes when you're unable to appropriately describe your content using semantic HTML elements
• Use 2 spaces for indentation
• Use lowercase tags (<h1> not <H1>)

Many of these guidelines are borrowed from Airbnb's coding style guide.

• Use CSS3
• Use the block-element-modifier (BEM) naming methodology for CSS classes
• Prefer dashes over camelCase for class names
• Prefer dashes over underscores in class names except when using underscores to match the BEM naming convention
• Use 2 spaces for indentation
• Do not use ID selectors
• When using multiple selectors in a rule declaration, put each selector on its own line
• Put one space before the opening brace { in rule declarations
• Put one space after, but not before, the : character in a CSS rule
• Put a semicolon ; after each CSS rule in a declaration, including the last rule
• Put the closing brace } of rule declarations on its own line
• Put blank lines between rule declarations
• Use Rivet Sass variables for color and spacing where possible (if you are using Rivet Sass)

.css-rule {
  display: block;
  position: relative;
}

.another-css-rule,
.more-css-rules {
  color: $color-blue;
  width: 100%;
}

• Use JavaScript Standard Style
• Use JSDoc to annotate your code
• Use data attributes instead of CSS classes to target your component's DOM elements with JavaScript. CSS classes should not be used to determine a component's behavior or manage its state.

Use comments as often as you can, especially if the reason for a particular block of CSS or JavaScript you've written needs additional context that can't easily be communicated by the code itself.

• Prefer CSS (not Sass) multi-line comments anywhere that actual CSS will be compiled/output. Use Sass-style comments (//) in code that doesn't output any actual CSS (variables, mixins, functions, etc).
• Put one blank line before and after comment blocks
• Break comments that exceed 80 characters on to new lines

/**
 * This is a really nice comment that helps other people.
 */

.css-rule {
  display: block;
}