Thursday 19 July 2012

MVCSS A Sass-based MVC CSS Architecture


Purpose

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 theright way is too convoluted.
MVCSS (MVC-based Style Sheets) is our method for creating predictable and maintainable application style by coupling Rails controller and controller action naming conventions to contextual style tweaks.

What? Another Way to Write CSS?

We're big fans (and often employ tenets of) well-documented methods like OOCSSBEM, andSMACSS. These setups tend to get us ~90% through a build flawlessly before taking an unwanted turn - usually as a result of organization issues in the face of placement-dependent alterations (more on that in the Layout section).

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 definitely not required to employ this paradigm, but we're big fans (hence the default project files being in SCSS - blame Rails). Most of the Sass-only stuff is found in Settings.


No comments:

Post a Comment