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