Sass in the Real World: book 1 of 4

Controller/action based styles

Inspired by Model-View-Controller(MVC) frameworks, mainly Rails, developers began to adopt these file structure solutions to help solve their issues. While there is some merit to this in regards to template/layout styles, this practice inevitably lends itself to creating styles that are too specific to each individual view and not easily reused throughout the rest of the application.

As a site's design progressed, duplicated code began to reveal itself between views. Attempts at abstraction, following another MVC pattern, typically resulted in the creation of a /partials directory. Basically, a simple repository for custom built mixins, variables and other reusable code. In essence, a Sass junk-drawer.

Following another Rails MVC patterns, developers attempted abstract away from the view and organize their files based on actions. If the visual elements are part of an action, making directories based on these actions makes sense, right? Sadly, this quickly falls apart as not all UI elements can be easily categorized this way. Random files again populate the directory, universal widgets, plug-ins, and custom mixins begin to collect. Once again we find ourselves suffering from the Sass junk-drawer effect.