Worcester Bosch Styleguide

This is a living styleguide, any style here is generated with the current live site's source so should always be up-to-date.

The objective with this is to promote style reuse by defining a way to split up patterns and allow them to be discovered in one place.

I've put together some thoughts (@nickcolley) of what I was thinking at the time of writing, no doubt these will be out of date soon but hopefully it gives context. Feel free to update accordingly.

1 - Users first

Always consider the user above anything else.

Sometimes business goals will clash with the users needs or their experience, make sure to fight to keep a balance - Sometimes it just has not been considered properly and you can have both.

Put performance above aesthetics - remember performant web design does not have to be boring or ugly, just considered.

2 - Don't write CSS

Approach designs and carefully consider what we already have, chances are there is something that we can reuse.

This will keep consistency within the website and ensure our CSS does not bloat, as CSS blocks render this is very important for longevity of the site for our users and our codebase.

If there's patterns that don't quite work, consider refactoring them rather than inventing a new pattern, we should be trying to remove as much CSS as we can, this is should be an ongoing process.

3 - Write 'delete friendly' code, not abstracted code.

Composition is key, make sure when building new patterns to compose others where possible, extending classes is dangerous as it will tie the base implementation to a modification making it harder to delete.

Since refactoring (this case dead code removal) is so difficult in CSS a conscious effort upfront will benefit in the long run.

Consider repeating yourself rather than coupling code together, if you keep your patterns small you can rely on composition (2.)

4 - Build patterns in isolation

Make sure any new patterns that can't be composed from other patterns are built so they have zero side effects. You should be able to move a pattern around a page and views without it being broken: this is key to keeping them composable.

Built using https://github.com/kss-node/kss-node