Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

What is object-oriented CSS?

Sunday, November 11th, 2018 by Servage

css3Object-oriented programming is a common practice in many programming languages. It helps you with the DRY principle (don’t repeat yourself) by allowing you to repeatedly use code from a single code base. How would applying the paradigm work with something other than a programming language, like CSS? Let’s find out how CSS can be written in the same way and what are the benefits of doing so.

The Two Principles of OOCSS

Object-oriented CSS (OOCSS) is built upon two main principles. Firstly, content should be separated from containers. If content and its container are not tied to each other too closely, it allows you to reuse the containers for different types of content like text, images, lists and tables while only having one container layout. The container should be able to adapt to the type of content it holds. This helps with following the DRY principle.

The second principle is about separating layout styles from your design. Many websites use a grid system as a layout. This grid system often comes from a third-party library such as Bootstrap or Foundation and is stored in a separate CSS file as the styles you write to make your website look unique. The benefit of doing this is also related to the DRY principle. If you use Bootstrap, you can reuse its classes like containers and columns as often as you like without modifying the styles of Bootstrap directly. Because your own styles are in a separate style sheet, you can simply add your your own CSS classes to those containers and columns to make them look different.

Writing OOCSS

A key part of OOCSS is to style the most common elements with universal styles, which means their appearance should be the same on all pages. Some common elements are headings, links, lists and of course the containers we talked about. In your own CSS file, you can define styles for h1, h2, ul, a:hover and so on. If you load the same style sheet on all HTML pages, you can use the same styles throughout the whole website, which once again reduces the amount of repetitive code.

Let’s consider a scenario where you are building a news website. It has a container with many news articles, and articles can be opened to show the whole content on a single page. The single page can have images and a summary at the end. You might want the summary to use a different font than the rest of the page, and the images should use 100% of the width of the article container.

You can achieve this by having styles that target “.news-article img” and “.news-article .summary”. By not targeting all HTML5 article elements, we can only change the appearance of news articles and let the rest of the article elements inherit their styles from a more common style sheet. Now if you add the “news-article” class to an article, it only changes the appearance of that article while keeping the rest of the site untouched.

As a summary, object-oriented CSS is a way of writing less-repetitive CSS by making elements reusable regardless of their content or where they are placed on the page.

What is object-oriented CSS?, 3.7 out of 5 based on 3 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.