CSS selector pattern is redundant and ignores CSS strengths

Currently I'm using stupidly long class names to pick out specific elements. This was done to make styling easy for newbies. But  tbh newbies aren't really our main audience.

This is clumsy:

```
.s8-page-header-nav-menu-item-icon { /*rules*/ }
```

This is better:

```
s8-page s8-header s8-icon { /*rules*/ }
```

So: The TODO is to revise the theming system to use 'atomic' CSS. 
