Parsing CSS


playing with parsed CSS - projecting ui based on it, in order to quickly assess a body of styles.

The beauty of CSS is that it is de-coupled from the content that it stylizes. Being able to separate form & style from the content itself was an early innovation of the web browser and the HTML spec.

As a web developer, having the ability to manage styles independently of markup proves beneficial when a project reaches a certain scale. However, the cost of de-coupling the styles is that they must then be re-applied, in context, in order to take effect or to be seen. So, with the newly found modularity in separating styles, compilation became an implicit dependency in order to complete a full development cycle.

Accordingly, I'm interested in exploring how to manage styles separately, in a central repository - as a good dev/designer would - but to be able to view them in-line via my tools, so I am relieved of the burden of processing the virtual DOM in my head.

I started playing with a Ruby .gem to explore this idea. Goals include: * removing excess or un-used CSS from runtime compilation (styles may still exist, as part of a style library, but not compiled and sent to the client) * editing styles intuitively inline in a WYSIWYG, and managing them

Update Summer 2016

Chrome Dev Tools has interesting style and CSS features, if you link to your source in Dev Tools.

A figment of

Afomi is the digital sandbox of Ryan Wold. This site, like myself, is a work in progress. I am always evolving it to better share my inspirations and aspirations.


Ryan is a systems-thinking Product Developer and Designer who practices agile, test-driven, and lean software delivery, while solving problems with people.

Random Notes