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.
Check out this overview for how ordering the contents of an element, and below I'll go over some reasoning for each one.
element {
| /** | |
| * 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); |
| 'use strict'; | |
| /** Organisms */ | |
| import gulp from 'gulp'; | |
| import os from 'os'; | |
| import pkg from './package.json'; | |
| /** Molecules */ | |
| import autoprefixer from 'gulp-autoprefixer'; |