Home Blog Flexible Objects

Flexible Objects

12th December 2013

Following on from the previous post looking at an overview of CSS architecture, it’s time to outline the approach we’ve been taking and why we love it so much.

For a long time we’ve been tweaking at what we call the web-prototype: a starting point for building our websites. The point of it is to encourage good practices and good design patterns without limiting or causing our work to look “samey”.

Recently we started looking seriously into using some ideas based on Object orientated CSS architectures. Greg, in the previous blog, outlined these as well as the advantages of “Atomic design”. It is from that we came up with an approach which has proved to be incredibly flexible.

The Structure

Mixins and Objects now make the central pillar of our Sass file structure. Objects are the styles which define individual, moveable and reusable blocks of code. Each Sass object is independent and doesn’t break the site if you take it out. Class names in the HTML have changed to reflect this as well:

  • class="nav-list" would indicate a nav-list object.
  • class="_item" would be part of the nav-list object. Note the underscore: this means this is part of a bigger object.
  • class="-is-selected" would be the class added to the selected item. “-is-” is a useful prefix to denote a change in state for something.
  • class="-horizontal" is a property of an object. Often these are not needed and properties are defined in the object CSS, but in cases where they are needed they use a little hyphen prefix. Sometimes an object can have a variant that doesn’t warrent an entirely new one. For example "nav-list--horizontal".

You may have noticed no mention of IDs. We discovered that there is actually no need for IDs in styling. Everything can be done in classes. ID’s are useful as Javascript and URL hooks.

The Power of CSS

The Mixin Library is building up to be a very useful piece of kit, allowing use of CSS3 attributes and relieves us of repetitive coding: DRY coding, if you will.

CSS is now at the forefront again for impressive interaction with websites. Javascript, and even Photoshop are taking a bit of a backseat.

What next?

It’s a good time to see how far the protoype and the Sass structure can be pushed. With Object Orientated back-end programming it makes sense for the front-end to use a similar approach. Javascript is probably the next mountain to tackle. It’s tempting to stick to what you know, but this time next year it could be what we’re raving about.

Bourbon and Inuit have been major influences in our work as well as Jonathan Snook’s SMACSS

Related Articles

on 12th December 2013