In June 2010 Nicole Sulivan wrote a hugely influential blogpost that quite literally changed how developers structured their CSS. She introduced to us what is widley known as The Media Object and with that the whole concept of OOCSS was brought into the mainstream.
TL:DR; OOCSS is a method of grouping common design patterns into individual entities that can be re-used throughout your project. Done correctly this can greatly reduce duplication and because the code is now more modular it allows things to be rapidly and efficiently scaled, as well as reducing maintenance overhead.
##The media object## The media object is a fixed-width image and fluid-width textual content laid out side by side. Unlike a typical floating scenario the fluid content does not wrap around the image it simply expands downwards. This article is assuming your knowledge of the Media object so I suggest you read Nicole’s post before you procede.
##The flag object##
Early 2013 Harry Roberts introduced us to, what he has coined the flag object,
it’s intention is to fix the problem of vertical alignment. It does so using a
table cells ability to vertically center it’s content.
This article also assumes you have a full understanding of how the Flag Object works. I therefore recommend that you read through Harry’s
before you procede any further.
##The Flag Object vs the Media Object##
Assuming you have read and understood both articles you may be left thinking
that with the Flag Object being considerably more powerful for layout, why was
the Media Object was not made redundant. The simple answer was browser support.
The Media Object will work in browsers right back to IE6. The Flag Object
uses the properties
display: table and
display: table-cell which is only
supported in IE8+ and back in 2013 when the Flag Object was introduced most of us were still supporting IE7.
##Should we drop support for the media object?##
In short the answer is a resounding YES!
It’s now 2015 and I think the time has come to drop the Media Object, IE7 useage is now so low that apart from some edge cases there is no real need to support IE7, which means the flag object is going to work across the board.
I personally stopped using the Media object about half a year ago, and since then I have found many more uses for the flag object that go far beyond it’s initial intended use.
In my next blogpost I will be looking at extending the Flag object and demonstrating how this versatile bit of code can be used for far more than simply centering Images and text.