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.

About Afomi

Afomi is the digital sandbox of Ryan Wold, who is always evolving this to better share inspirations and aspirations.

About Ryan

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