This project uses SCSS which is specified in the styles section on the individual [Single File Components](https://vuejs.org/v2/guide/single-file-components.html)

Shared configuration (e.g. colors) and some utility (e.g. mixins) can be found in [src/styles](../src/styles).

We follow the [BEM](http://getbem.com/) (Block, Element, Modifier) approach to create self-sufficient, portable components. Component styles are generally named as follows.

* Block
  * The component name (e.g. button)
* Element
  * A semantic name for a node inside a component (e.g. text)
* Modifier
  * A state of a Block or Element (e.g. disabled)

In addition we are using a prefix for all our classes: `wb-ui-`. This approach reduces the chances of our styles inadvertently matching 3rd party/legacy mark-up with which we integrate.

The above example would yield a class `wb-ui-button__text--disabled`.

The output of this project gets integrated into pre-existing pages that we do not fully control and the styles of which were not necessarily developed with consideration for component isolation. Additionally, browsers bring about their own default CSS for many HTML elements. To reduce the likeliness that the mark-up we create is inadvertently matching selectors of 3rd party/legacy styles we [employ](../src/components/App.vue) so-called ["reset CSS"](https://www.npmjs.com/package/reset-css) which undoes (within the realms of possibility) notorious styles for many elements.