Writing CSS

CSS component structure

Here's a starting point for a new component:

/* ==========================================================================
   My component name
   ========================================================================== */

/* Variables
   ========================================================================== */

/* Component
   ========================================================================== */

Note the first level and second level block comment. Check Necolas's Idiomatic CSS repo for more information.

Here's what the component would look like a bit further down the line:

/* ==========================================================================
   Custom component
   ---
   Does something custom
   ========================================================================== */

/* Variables
   ========================================================================== */

$c-custom-bg: #FFF !default;

/* Component
   ========================================================================== */

.c-custom {
  background: $c-custom-bg;
}

.c-custom--modifier {
  background: #000;
}

.c-custom__child {
  // Code for child
}

.c-custom__child--modifier {
  // Code for child with modifier
}

SCSS formatting

We use 2 spaces and no tabs. Please see the .editorconfig file in the repository for more specifics. It is helpful to download an editorconfig plugin for your editor. Please see editorconfig.org.