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.
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 →