Styling

CSS Preprocessors

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax (source). It supports additional features such as variables, mixins, nesting and inheritance selectors. Using those, theming becomes more concise and maintainable.

Choosing a Preprocessor

We recommend using Sass in its SCSS syntax. It looks similar to plain CSS but adds additional functionality. A notable alternative is Less, though this page will assume you use SCSS.

Best Practices

In general programming principles should also apply to frontend styling. That includes keeping code short and concise and to avoid repetition where possible.

Isolation

CSS and SCSS allow for complex and deeply nested styles. Nesting styling deeply might make understanding difficult, so generally style isolation is advised. Angular helps with that using view encapsulation, which isolates each component's style sheet from another.

There are ways to avoid view encapsulation: for example global style sheet files and ::ng-deep. Use these sparingly.

Modern CSS Features

Apply shared properties like colors and fonts through var & prepare for themes

Consider preparing your project to incorporate different themes. In the example project, we allow switching between a light and dark theme.

We recommend using SCSS variables for static values to benefit from build-time checks:

colors.scss

$color-white: #ffffff;
$color-black: #000000;
$color-orange: #ffa500;
$color-orange-light: #fac984;
$color-nobel: #b4b4b4;
$color-dark-gray: #1f1f1f;

If one of the variables is referenced somewhere and deleted here, SCSS will raise a build error.

CSS custom properties instead allow for dynamic changes during the runtime. An example use case could be the theme switching functionality:

dark-theme.scss

@use 'colors';
 
html,
body {
  &.dark-theme {
    /* Main theme colors */
    --color-highlight: #{colors.$color-orange};
    --color-secondary: #{colors.$color-nobel};
 
    /* Background */
    --color-background: #{colors.$color-dark-gray};
 
    /* Buttons */
    --color-button-primary: #{colors.$color-orange};
    --color-button-primary-hover: #{colors.$color-orange-light};
    --color-button-secondary: #{colors.$color-dark-gray};
 
    /* Text */
    --color-highlight-text: #{colors.$color-black};
    --color-content-text: #{colors.$color-white};
  }
}

SCSS features

Mixins

By using mixins it is possible to reuse styles in your application.

@mixin button {
  padding: 15px 32px;
  font-size: 20px;
  cursor: pointer;
}
 
@mixin button-primary {
  @include button;
  background-color: var(--color-button-primary);
  border: 3px solid var(--color-button-primary);
  color: var(--color-highlight-text);
 
  &:hover {
    background-color: var(--color-button-primary-hover);
  }
}
 
.confirmation-button {
  margin-bottom: 50px;
  @include button-primary;
}

Nesting

Structure and scope your styles in a clear and hierarchical order by nesting selectors.

.product {
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-secondary);
  height: 100%;
  cursor: pointer;
 
  &:hover {
    border-color: var(--color-highlight);
  }
 
  &-title {
    text-align: right;
    padding-right: 20px;
    padding-left: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
 
  &-image {
    padding-top: 10px;
    width: 100%;
  }
}