In order to improve the clarity, quality, and development time it is worth considering the following principles whenever possible:

• Keep Sass Simple, which means KISS (Keep It Simple, Stupid) may override DRY (Don't Repeat Yourself) in some cases
• Single responsibility selectors

• Airbnb CSS / Sass Styleguide is partially being followed in our code base.

• CSS with BEM is partially being followed in our code base.

• Most styling issues will be caught by stylelint, so before pushing your changes remember to run grunt stylelint to catch and fix any issues that it finds.

• Check below for the rules that are not caught by styling but should be followed.

Selectors: Selectors should follow the BEM Two Dashes style: block-name__elem-name--mod-name--mod-val.

.button {
}
.button--disabled {
}

Remember to follow the Single responsibility principle.

Variables: Sass variables should be in uppercase and have a meaningful prefix.

$COLOR_RED: #e31c4b;

// Light theme
$COLOR_LIGHT_BLACK_1: rgba(0, 0, 0, 0.8);

// Dark theme
$COLOR_DARK_BLUE_1: #0b0e18;

Keep all common variables in the constants.scss file.

Flexibility: If flexibility is needed, for example for font-size, use units such as rem, vh, vw, fr, and only use px if it's supposed to be a fixed value.

• em is typically used in padding and margin to maintain the vertical rhythm. If a user resizes the text, the em unit will be scaled proportionately. em size is always relative to the font-size of the element.

// For example: `span` with font-size of 14px and padding of 8px.
// The padding in `em` should be `14px/8px * 1em ~ 0.571em`.
span {
  font-size: 1.4em;
  padding: 0.571em;
}

• px is used to define a fixed value such as for box-shadow, border-radius and border-width.

1. Since the base font-size is set to be 10px = 1rem, convert px to em by dividing the px value by 10.

.balloon {
  padding: 1.6em; // 16px;
}

2. Or any online converter tool.

Mixin: use mixins wherever possible to standardize the colours used in different themes and reduce repetition.

@mixin link {
  color: $COLOR_WHITE;

  &:hover,
  &:active {
    text-decoration: none;
  }
}

.sidebar {
  background: $COLOR_LIGHT_GRAY;

  a {
    @include link;
    display: block;
  }
}

Explanations: Feel free to add comments to explain any styling that is confusing.

To do: Use TODO: ... comments anywhere that need consideration or attention in the future.