chartmogul-css-guide.md

CSS Style Guide

This is the start of a CSS style guide for ChartMogul’s web properties.

Methodology: BEM

use for all new components, refactor old components as wished

As a web project grows it’s important for any developer to quickly see what a piece of code does. Using the so called Block, Element, Modifier methodology in particular helps with that. By just looking at the classes in HTML, a developer can immediately see what a class does in CSS.

Example:

<a class="btn btn--big btn--orange" href="http://css-tricks.com">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

This also means that every element styled with CSS gets a class so the CSS only holds class selectors and no element selectors:

/* BAD BAD BAD */
input { font-size: 1rem }

/* NICE NICE NICE */
.form__input { font-size: 1rem }

It’s more verbose and fills the HTML with more stuff but in the end makes the whole HTML/CSS more maintainable.

Sizing & spacing units

Using relative units (em, rem) is the best compromise between pushing our style and a user’s own browser settings.

Font sizes

requires refactor throughout whole CSS code base

By using rem instead of em we can make sure a component’s font size is consistent no matter the context it is put in. It’s also the easiest way to get nice responsive typograhy without changing all font sizes again within media queries.

With rem all spacing is relative to the absolute font size declared on the root element so it’s always clear what a specific font size is based on. For better predictability it’s best to use an absolute unit for declaring the root font size and then only use rem based declarations after it.

Quick example including responsive typography:

html { 
    font-size: 18px;
    
    @media (min-width: 50em) {
        font-size: 20px;
    }
}

// default all typography to root font size
body { font-size: 1rem; }

// will always be 200% bigger than root font size
h1 { font-size: 2rem }

rem is widely supported in modern browsers so we don’t have to use a polyfill or fallback.

Spacing

use for all new components, refactor old components as wished

For consistency it’s best to base all spacing like margins etc. on something like a $spacer variable which itself is relatively based on the root font size too. This prevents all those magic numbers popping up in the CSS where nobody really knows anymore how the numbers were created.

Example:

$spacer: 1rem !default;

p {
    margin: 0 0 $spacer;
}

h1 {
    margin-bottom: ($spacer * 2);
}

This ensures all spacing is updated relatively to root font size too.

Media Queries

to be continued…