By Harry Roberts CHAPTER 1logical chunks which can then interact with each other. Instead of one
monolithic piece of code to complete tasks ABC, you’d end up with each of
A , B and C abstracted into its own object. Now we’d have A which we can
combine with either B or C in any order we choose.
This idea, brought to CSS, allows us to do away with cumbersome rule
sets that do one specific thing, so we can use several smaller, simpler rule
sets that can be combined to achieve the same result.
As well as abstraction, OOCSS also introduces the principle of struc-
ture and skin: what makes up the structure of a component should exist
separately from what makes up its visual features. The same, underlying
skeleton can be repeated over and over on a website, but skinned to look to-
tally different in each case. This is the advantage of abstracting repeatable
objects: the ability to manipulate and repurpose them in many different
scenarios.
Takeaway: Spot repeated design patterns, abstract them, reuse them. Sep-
arate components into structure and skin and embrace tried-and-tested
programming paradigms. For more information about OOCSS I would
recommend reading Nicole Sullivan’s GitHub Wiki^10.
Code Structure
When writing large amounts of CSS, it is important to plan how you’re go-
ing to organize it. As the old saying goes, failing to plan is planning to fail,
and it is vital that you spend a lot of time thinking about your architecture
before you dive straight in and start coding.
bReaKing ThingS Down
If you have a mortgage or student debt, or have ever done any spring clean-
ing, you will be familiar with breaking these things down into smaller,
more manageable chunks. You might have a mortgage of $200,000, but
10 github.com/stubbornella/oocss/wiki