CONTRIBUTING.md

Contributing

JavaScript Codestyle

• Two spaces for indentation

  {
-     console.log('4 spaces')
+   console.log('2 spaces')
  }

• No semicolons

- console.log('hello');
+ console.log('hello')

• Space after keywords

- if(true) {}
+ if (true) {}

• No space after function name

  class Dog {
-   bark () { console.log('Woof!') }
+   bark() { console.log('Woof!') }
  }

• Prefer const over let over var

- var k = 2
- let k = 2
+ const k = 2

  console.log(k)

• Spaces between operators

- 2/4
+ 2 / 4

• No spaces after/before curly braces

- const obj = { a: 1, b: 2 }
+ const obj = {a: 1, b: 2}

• ...except when destructuring

- const {a, b, c} = obj
+ const { a, b, c } = obj

• Use trailing commas in multiline literals

  const arr = [
    1,
    2,
-   3
+   3,
  ]

CSS Naming Conventions

This is essentially our own flavour of BEM.

• Use pascal-case .ComponentName for components

<style>
  .Button {
    color: var(--Button-fg);
    background: var(--Button-bg);
  }
</style>

<a class='Button'>Click me!</a>

• Use &.\--modifier for modifiers

<style>
  .Button {
    color: var(--Button-fg);
    background: var(--Button-bg);

    &.\--invert {
      color: var(--Button-bg);
      background: var(--Button-fg);
    }
  }
</style>

<a class='Button --invert'>I'm more important</a>

• Use &.is-state for states (ie. temporary)

<style>
  .Image {
    &.is-loading {
      /* ... */
    }
  }
</style>

<div class='Image is-loading'></div>

• Use camel-case &-childName for children

<div class='Message --from-system'>
  <span class='Message-author'>
    System

    <img class='Message-author-avatar'/> <!-- children of children! -->
  </span>

  <span class='Message-content'>
    <i>Sam</i> joined the channel.
  </span>
</div>

• Use prescriptive variable names

  :root {
-   --color-dark: #121212;
+   --Sidebar-bg: #121212;
  }

• Never leave off the leading zero in decimals

- color: rgba(0, 0, 0, .6);
+ color: rgba(0, 0, 0, 0.6);