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.
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
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.