«

OOCSS & RWD

Adopting an object oriented approach to developing a website is something that many people are starting to do. The object oriented way of writing CSS and using more classes in your HTML produces efficient, less-repetitive code with a higher level consistency throughout the site. Harry Roberts spoke about Breaking Good Habits which is a great introduction to OOCSS.

Responsive Web Design goes hand in hand with OOCSS. Adopting the object oriented technique to CSS whilst creating a responsive site causes your site to be more consistent when it comes to viewport size changes and also makes development of page structure and how an element adapts on a viewport changes a lot easier.

Background

At work I was starting our first rather large responsive site. After looking through the pages on the site, I noticed that page structure was similar or very close to the norm. A site's structure being similar on each page is a perfect excuse to use the OOCSS approach.

The pages on this website were columned. Either full-width & single columned, half-width & double columned or three-quarter width, quarter width & double columned. I personally would have a class of col with a 100% width, then write some modifier classes of half, three-quarter and quarter. The widths would be set in percentages of the parent element so they scale correctly.

I also added some modifiers to the col class, left and right. These classes float the item left or right depending on which class you have used.

Adding the OOCSS approach to RWD

I wrote what I like to call reactor classes. These are classes that decide how that element or block reacts or adapts on change of a different viewport width. These classes are not meant to be used to determine properties that do not change.

The first reactor class I wrote was stacked. The idea of this class is to no longer float the item when the viewport width was under 520px, therefore causing the items to stack up on top of each other.

The next reactor class I wrote was full-width. Because the items are set previously to percentage widths, they need to be made full-width. Hence the class name.

Now these columns are scaled-widths, floated and fully responsive. For the other page structures, the column widths are already accounted for. To write the other pages, it's now just a case of adding a few classes whilst writing your HTML and giving your HTML structure a think for the mobile layout.

Writing the other pages

As noted above, the other pages of this site are similarly structured, so let's make another page. This time I'm going to write the articles page. The articles page is made up of a three-quarter width column, and a single. The follow thought process would naturally take a few seconds.

The three-quarter width column is the main column and the single the sub content. I'm going to place the main content before the sub content in the markup so on mobile, the main content comes first. Each column needs the class col, and the main content needs to be floated left while the sub content is floated right. So I'll add the left and right classes.

I then add the class of stacked and full-width so that on mobile they're not floated and they're full width. The structure for the articles page is done, we can now go on to add the content of the columns.

<div class="col left stacked full-width"
    <-- main content -->
</div>
<div class="col right stacked full-width">
    <!-- sub content -->
</div>

More on reactor classes

Reactor classes should not be used for your rules that don't change, text colours etc. They are strictly for use with media queries. Another example use for a reactor class could be two items that are adjacent to each other on mobile. This would then float an item. The adjacent reactor could be used on my site, for the navigation links.

Conclusion and outcome

There's many reasons why using an OOCSS approach to a responsive site is a good idea. The site is more consistent, clean, issues have to be fixed only once, reduced code and many more reasons. Development is also made a lot easier, by having a set of reactor classes you've written you can essentially write HTML and the page structure is done, and responsive.

This post may have been useful to you or not. I'd love to know your opinion on this article, and my idea of reactor classes.

Share Comment on Twitter