Pull request Compare This branch is 10 commits behind develop.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
readme.md

readme.md

Introduction

This document outlines the way Customer Success team is expected to write their CSS. Following this document ensures that everyone is writing markup that feels familiar and can be maintained by anyone with little overhead.

We follow a mixture of various methodologies include, but not limited to: SMACSS' seperation of concerns, OOCSS' modularity, Topcoat's coding guidelines, BEM-ish naming conventions, and others.

Table of Contents

Tools & Frameworks

  • Sass is our preprocessor of choice
  • PostCSS for its Autoprefixer plugin
  • Vellum is our starting point for base styles on Customer Success projects at Mobify
  • Spline is our library of Sass mixins and functions
  • Stencil (Deprecated – but a new 2.0 version is coming soon!) is our library or reusable UI patterns
  • Sass-Lint is our preferred linter for SCSS. Our custom linting rules are found here). Find out how to integrate Sass-Lint with your text editor here.
  • CSScomb is a tool that can be plugged into most popular text editors that automatically formats your code! Our formatting ruleset can be found here. Find out how to integrate CSSComb with your text editor here.

Philosophy & Structure

We strive to write modular, component driven CSS with a clear seperation of concerns, structured so they are reuseable and findable. In the end, our code should be easy to maintain by anyone - even for new people entering a project.

These guidelines are a summary of our base principles: Our code bases should all...

  • Be written like a single person typed it
  • Be components first
  • Be page specific only as a last resort
  • Be written with nesting no deeper than 4 levels
  • Be written with selectors that self documents its location

Our seperation of concerns is reflected by our style directory structure as follows:

/styles
    /vellum
    /components
    /partials
    /pages

Note that Vellum represents our "Base" styles.

You may notice the heavy influence of methodologies like SMACSS and OOCSS.

Familiarity with these concepts is cruicial! If you are not, then we urge that you at least learn the basics: Jonathan Snook's "CSS is a Mess" and Andy Hume's "CSS For Grown Ups" is a good place to start.

Continue on to CSS Best Practices →