May 15, 2013
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
@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
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.
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.