CSS Approach

The CSS approach for Project Franklin is based around ITCSS + BEM, two methodologies designed to help scale CSS on large projects.

ITCSS diagram

ITCSS

ITCSS separates the CSS into layers, ranging from the most generic & wide-reaching (settings) to the highest specificity (utilities). Components and Utilities are the most commonly used sections of the inverted triangle. Note, we tend not to use the 'generic' layer.

Settings

Foundations for typography, space, colour, shadows, font stacks. In SCSS, this area produces no CSS, in PostCSS this adds variables to the :root element.

Tools

SCSS mixins & functions - no 'CSS' actually generated.

Elements

Code that targets HTML elements directly. The reset lives here, <body> styling, sensible input styles too. Anything that has 'global', but low specificity implications.

Objects

Any parent elements that wrap around child components/elements and provide opinionated styling lives here. Wrapper, Grid, Prose all fall into this camp. Objects are prefixed with o-.

Components

Most of the CSS lives in this group. Each component is an encapsulated 'block' (more on that later) that styles within. Components should not leak padding or margin, nor control their width or height; this should be controlled by the objects above. They use the c- prefix.

Utilities

Utilities are classes that do one thing really well. For example: .u-hidden hides elements on the page in a non destructive way (still visible to screenreaders). There are auto-generated spacing, typography and colour classes to help compose a page (and prototype new components before refactoring them into the above groups). The u- prefix is used for utilities.

BEM

We use BEM as a naming methodology, with __ used for elements, and -- used for modifiers.

/* Pattern */
.Block {
  &__element {}
  &--modifier {}
}

/* Usage */
.c-tag {
  background: color('petrol');
  color: color('petrol', 'step-3');

  &__title {
    font-weight: weight('bold');
  }

  &--inverted {
    background: color('petrol', 'step-3');
    color: color('petrol');
  }
}

For more information about BEM see getbem.com

SCSS variables vs. CSS custom properties

Project Franklin is designed to support IE11+, which leaves a large support gap for custom properties—sadly, polyfilling is patchy at best. For this reason, the design system relies more on SCSS variables than custom properties.

However, the fluid typographic and space system does require runtime variables. For this reason, there are a number of powerful mixins in play, that provide solid fallbacks to older browsers, whilst still letting new browsers use custom properties.