CSS Standards

Technologies & Modern Features

• Bootstrap 5
• SCSS
• CSS Custom Properties

Style Guide / Branding

Figma Style Guide

Naming Conventions

Look for the Two Dashes style under the Alternative naming schemes heading in the following documentation:

BEM Naming Documentation

Using CSS Custom Properties with SCSS

This project utilizes element-local CSS custom property definitions wherein a .bcgovbtn class may declare its color to be as such: color: --btn-clr and then any extensions of this base class may define the value of --btn-clr like this: --btn-clr: #{$text-light}.

Example

.btn {
  background-color: $primary-color;
  font-family: 'BCSans', sans-serif;
  color: var(--btn-clr); <-- this is where the magic begins
}

.btn__primary {
  --btn-clr: #{$text-light}; <-- note the #{} syntax wrapping the SCSS variable, this is required
}

TL;DR

When naming new CSS variables use the following convention:

block-name__elem-name--mod-name--mod-val

e.g.:

.btn__primary--type--outline