Proposal:

1. Add sematic classes to all markup elements. (but do not use for styling yet, keeping representational and library classes in markup).
2. Move styles within stylesheets to the semantic classes (via mixins or preferably @extends).
3. In case of integration/acceptance tests, update them to the semantic classes.
4. Remove representational and library classes from the markup.

The look of the page should not change at all during these steps. Might be a use case for PhantomCSS.

When finished, the semantic classes can be used as an API for custom CSS styling.

Notes on the CSS classes:

I have been playing with stuff based on _Simple Naming for Modular CSS Class Names_ and settled on giving most elements a three point identifier like view--component--element.

While using double dashes raises eyebrows at first, these classes have not only been a breeze to style, but also to write tests for.

I'll try to send a PR for step one.

@wwebfor How do I start the app locally? grunt serve outputs this:

@filtercake, you should compile less file with grunt task: grunt lessc

Related issues:

226 Request: Night mode

421 Dark theme