Skip to content

Instantly share code, notes, and snippets.


Over the course of four articles, I'd like to cover my fairly rigid approach to writing CSS*. Like any other language, CSS is easier to read and introduce to new developers if it follows consistent patterns.

In Part One we'll cover general organization of basically everything that makes up a given element.

Part One: Organizing Attributes

Check out this overview for how ordering the contents of an element, and below I'll go over some reasoning for each one.

element {
View es5-class-pattern.js
* es5
* Class declaration, methods and properties assignments hoisted to the top
* Assignments returned from a function hidden below so the basic pattern for the class is always the same, always at the top
* Properties are put on the Class prototype as getter/setters
function ClassName() {
this.init.apply(this, arguments);
View gulpfile.babel.js
'use strict';
/** Organisms */
import gulp from 'gulp';
import os from 'os';
import pkg from './package.json';
/** Molecules */
import autoprefixer from 'gulp-autoprefixer';