BEWARE! This is an archived article. It is potentially out-of-date, incorrect, or otherwise in disagreement with my current opinions. Proceed with caution!

May 15, 2013


By Drew Barontini

It feels like such a short time ago that Nick Walsh and I, determined to apply proper conventions to our CSS, came together and created MVCSS.

MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style.

Individually, both of us had become frustrated with the ever-changing naming and organization of our CSS, and we wanted to create defined conventions that we could follow and iterate on over time. With that, we grew MVCSS into what it is today—version 3.0.0.

All Conventions, All The Time

Everything in MVCSS follows a specific naming convention; from the variables to the class names, there are specific guidelines. This is useful for those of us (most front-enders) that are driven insane by naming.

Settings & Helpers

In v1 of MVCSS, we lumped @font-face declarations, variables, extends, functions, mixins, and keyframe animations into the all-encompassing “settings.” However, this file quickly grew out of control, and we realized we needed to split it up. In v3, settings only contains @font-face declarations and variables, while the remaining elements are moved into helpers.


The split of settings and helpers allows you the space to create more variables for your application. This provides greater flexibility to make simple changes sitewide.

Content & Layout

Two new core files, content and layout, provide the bridge between base-level tag styles and modules.

The Library

Initially, we started building the library as a Bootstrap-esque framework, but quickly realized that just doesn’t fit our model. We would rather provide a slim architecture, and then build components (JS/CoffeeScript), and modules/helpers (Sass) that can be included in your default MVCSS project, as needed. That’s what v1 of the library is today.

Iterate, Refine

Nick and I are constantly iterating and refining MVCSS. With each new application front-end that we build, we explore new tools, techniques, and organizational structures that can make things better. These discoveries are reflected in the updates to MVCSS.

© 2019 Drew Barontini — Building products under Drewbio, LLC