Life is about journeys. It was during my journey of 'doing it wrong' that I began to see clearly. Ironically, I had the right solution all along, but didn't realize it. While part of a team developing an enterprise CMS, our process was to decompose a site's UI to it's lowest common elements. From those elements we could then build modules and then finally assemble the view templates. Each step building on the previous. Although my stylesheet management techniques weren't perfect, my concept of UI abstraction was solid.
In 2009, I began working with a new team, sans a CMS and my first encounter with Sass. I approached the project with the same conceptual understanding, but the outcome was drastically different. The code became increasingly harder to reuse and making simple edits resulted in the re-engineering of HTML as well as CSS. Post launch, I sat down and analyzed the code I wrote. I came to the realization that, as a team, we were engineering our UI (CSS and HTML) from entirely the wrong perspective. We were approaching our development from the full page perspective. Engineering all our visual elements from the outside-in and scoped to a specific view.
I started thinking back to the processes I pioneered with the CMS. Patterns established in the framework dictated we start from the elemental perspective; type, colors, forms, basic UI chrome (borders, shadows, icons, etc) all coded first. Once those base element styles were completed, it was a matter of applying the skin to the individual CMS modules. The modules then in-turn were used to assemble the view within the various automated templates. It worked quickly and seamlessly. Building the UIs from the inside-out was clearly the right solution.