About

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

As front-end devs at Envy Labs, we work primarily in medium-to-large-sized Rails applications. Each of these projects has a sizable amount of CSS undergoing normal maintenance and iteration. Depending on complexity and setup, changes to existing style can be difficult or done poorly if the right way is too convoluted.

What? Another Way to Write CSS?

We're big fans (and often employ tenets of) well-documented methods like OOCSS, BEM, and SMACSS. This bit of architecture and accompanying Styleguide/Library meshes all of our preferred practices into one place.

All This for CSS?

CSS in and of itself is simple to pick up, but difficult to apply maintainably to large applications - hence the popularity of the methods listed above. MVCSS is one such manner to organize styles, and the one that we've had the most success in employing.

Do I Have to Use Sass?

Sass is not required to employ this paradigm, but all the project files are written in it, so it's definitely recommended.

Organizational Overview

MVCSS is broken down into three primary sections:

1. Application
2. Core
3. Modules