A new approach to CSS architecture
8th November 2013
Until we began to use SASS a few years ago we had been working from a set of stylesheets loosely based upon the popular Blueprint CSS framework. The introduction of SASS into our workflow gave us the impetus to rethink the way we use CSS in a big way.
The explosion of mobile devices has given birth to a huge number of new CSS frameworks. This new wave of solutions seem more thoughtful and considered than their predecessors and most of them are based on a few key concepts.
Object-orientated CSS is more of a mindset than anything else. CSS can never truly be an object orientated programming language but the key principles of abstraction and separation can be implemented to create scalable and modular CSS. It’s an ideology that lies at the core of the company. We’ve always strived to create extensible code which is easier to reuse and maintain.
Scalable and Modular Architecture for CSS is an approach laid out by Jonathan Snook. It’s not a framework in it’s own right, there are no files to download. It’s more of a guide to organising and structuring your CSS and helps to build more maintainable code.
The BEM or ‘Block Element Modifier’ methodology was developed by Yandex. At it’s core is a naming scheme used to split out code into more readable modules. It starts with blocks, which are compounds of elements, which in turn can be modified.
Atomic design has been gaining some traction recently. It approaches designing from an inside-out approach, designing systems of components rather than pages and breaking design into five levels (Atoms, Molecules, Organisms, Templates and Pages).
In many ways we have been using these concepts over the past few years, albeit without defining them. It’s only now, since the birth of responsive design, that we have a renewed focus in creating a scalable CSS framework of our own.
Over the past few weeks we’ve been restructuring and re-engineering our workflow taking advantage of the powerful functionality that SASS brought and pulling the best parts from our favourite frameworks and approaches. You can expect to see a few more updates on the blog over the next few weeks as we fine tune the architecture.