CSS/SASS Style Guide

• General Guidelines
• Global Styles and Use of ::ng-deep
  • Avoid Hard-coded Hex / RGB Color Codes and Pixel Values
• CSS
  • Literal CSS Values
• SASS Variables

General Guidelines

Global Styles and Use of ::ng-deep

Apply Global CSS styles via the styles.scss file.

Avoid using ::ng-deep - Any style with ::ng-deep applied becomes a global style. ::ng-deep is [theoretically] being deprecated in future versions of Angular, and therefore this should be avoided in most instances.

Avoid Hard-coded Hex / RGB Color Codes and Pixel Values

As a rule of thumb, avoid using hard-coded Hex / RGB color codes. These should instead come from a variables.scss, etc. This helps make colors more consistent throughout the project, and also allows for easier adjustments of color themes and styling throughout the app. Furthermore, those color variables are directly fed into the compiled Angular Material styling theme - so that consistency is key.

E.g., given a styles.scss like so:

// COLORS
$color-accent: #3fbb94;

// GENERAL BUTTON STYLES
$button-default-border-width: 1px;
$button-default-background-color: #fff;

// ACCENT BUTTON STYLES
$button-accent-background: $button-default-background-color;
$button-accent-text-color: $color-accent;
$button-accent-border: $button-default-border-width solid $color-accent;

Apply styles like so:

// Do this...
.some-accent-button {
  background-color: $button-accent-background;
  color: $button-accent-text-color;
  border: $button-accent-border;
}

// Instead of...
.some-accent-button {
  background-color: #989898;
  color: #fff;
}

CSS

CSS (Cascading Style Sheets) describes how HTML elements are to be displayed on screen and in other media. When working with CSS elements be sure to keep in mind selectors and specificity We use SASS which is written in .scss files and then compiled into CSS for styling in our Angular applications. We do not use any in-line styling or style tags.

Literal CSS Values

In general, CSS classes should not include literal pixel / color values - use a variable instead.

E.g., do this:

// variables.scss
$default-gutter: 15px;
$color-accent: #3fbb94;

// some-component.scss

@import "./variables";

.some-class {
  padding: $default-gutter;
  color: $color-accent;
}

Instead of this...

.some-class {
  padding: 15px;
  color: #3fbb94;
}

SASS Variables

SASS variables help consolidate the styling configuration of an app, allowing for a change in one place to permeate throughout an entire application. This allows us to define certain key values in one central place in a project and then use those values repeatedly. Examples of these include:

• Primary / Accent Colors
• Typography
  • Font Library, font sizes, etc.
  • H1-H5 definitions
• Border standards
  • Border weights
  • Colors
  • Radius
• Global Button / Control Styling
• General Layout
  • Default gutters
  • Default margins / padding
• Etc.

See the SASS docs for more details.