Understanding OOCSS
view all blogs...

Justin Bess :: May 31, 2018

What is OOCSS?

Object Oriented CSS is a design technique, originally proposed by web developer Nicole Sullivan in 2008. Her goal was to take some of the fundamental concepts of OOP, in languages such as Ruby and Java, and adopt them into CSS, to make CSS more manageable and dynamic.

Content / Structure

The first step in OOCSS is to separate the structure of your elements from their skin. You may be thinking, what is a skin, what is the structure of an element?.. When you apply attributes to an element, it falls under one of the two types. Determining the difference is quite simple. If the attribute applied affects the visualization of the element, then it can be considered a skin attribute, otherwise it falls under the structure category.

Here are some items which fall under their respective category

Looking at some code

The best way to grasp the understanding of OOCSS in my opinion, is by taking a look at some code examples. In the code below, we have a very simple CSS stylesheet, showing how one may have an avatar preview styled, and an actual avatar styled. For example, you see a small image on things like messages, but while viewing a profile, you’d like to showcase a larger version of the avatar/image.

In the code, you’ll find similarities in the visual (skin) attributes. Namely, the border and border-radius properties. When you see this happen, you could segregate the code into it’s own class for re-use, instead of applying the same code into two elements. This will help with code re-use, maintainability, and organization of your CSS stylesheets. You can also lower your download times, as your stylesheets can become much smaller using this type of approach.

Now for the OOCSS approach

The OOCSS approach takes the same example above, but demonstrates how to separate out the skin from the content. Essentially, it becomes very basic. You take the skin attributes and add them into a CSS class. You will keep your structure styling that’s different in their respective id selectors. In your HTML, you will then apply the skin class to the elements. The code below results in the same output, with the structure and skin separated!

Content / Container

Separating containers from content makes for a more consistent user experience. Using this approach means your markup can be more predictable. It also means that you aren’t having to over-rule styling attributes deeper down in your CSS. A general rule of thumb, is to not use child selectors, and set up your code in prospective classes.

You will see this demonstrated in the code below. The goal, is that your CSS isn’t dependent on the parent element. This means that no matter where you are applying the classes in your markup, you should expect to see the desired results.

Should you use OOCSS?

I think this is a valid question, which you should think about before starting on your project. OOCSS may be over-kill for small projects, and may not necessarily be of much help. I would encourage the use of OOCSS on larger projects and growing projects. This will make it easier to maintain, and for other developers to easily understand and adapt to your code. However, a disadvantage to this approach is that your elements will inevitably require more classes in your markup. Some people may not like this, so it all depends on your (and your teams) coding preferences. There are great technologies out there, which may make your life with OOCSS easier. One That I would highly encourage all developers to learn, is SCSS, which allows things like mixins, which can help you when separating out skin and structure. You could still apply the skin in your CSS code with SCSS, while keeping it decoupled from each selector. However, this will not reduce the size of your stylesheets; it will only provide the organization and maintainability benefits which OOCSS look to adopt.


      December 12, 2018


      Nice posts! 馃檪

      February 18, 2019


      When ED becomes a problem, many men turn to oral ED medications. erectile dysfunction ad – Buy cialis

      February 21, 2019

      comprar levitra

      Donde Comprar Levitra en valencia. Varias cosas pueden interferir en los sentimientos sexuales y provocar o empeorar la disfunci贸n er茅ctil. Aunque el estr茅s y la ansiedad son dos cosas diferentes, est谩n estrechamente relacionados cuando se trata de problemas de disfunci贸n er茅ctil.

      February 22, 2019

      comprar viagra

      Comprar Viagra generico online. Incluso en casos de impotencia por problemas f铆sicos, muchos hombres la necesitan para poder problemas de autoestima derivados de esta enfermedad. Si urge de resultados vaya a ereccion total. Uno de esos problemas es la llamada disfunci贸n er茅ctil, una disfunci贸n sexual masculina muy com煤n que se da cuando el var贸n tiene dificultades para mantener una erecci贸n.

      February 22, 2019

      comprar levitra

      Cremas: Continuamos con los iniciadores de erecci贸n, y en este caso mencionamos las cremas, son t贸picos de aplicaci贸n externa, sobre los cuerpos cavernosos; ayudan a la dilataci贸n de las venas y a la erecci贸n. La eyaculaci贸n precoz es la aparici贸n de una eyaculaci贸n prematura en el hombre, puede presentarse segundos despu茅s de la penetraci贸n o incluso antes de la misma. Los s铆ntomas de la disfunci贸n er茅ctil (DE) incluyen poder conseguir una erecci贸n a veces, pero no siempre; poder tener una erecci贸n pero no tenerla dura lo suficiente como para tener relaciones sexuales; y no poder obtener una erecci贸n en cualquier momento. https://comprarlevitra.com/

      February 23, 2019

      buy tadalafil online

      It is always worth consulting a physician about persistent erection problems, as it could be caused by a serious medical condition. Whether the cause is simple or serious, a proper diagnosis can help to address any underlying medical issues and help resolve sexual difficulties.

      February 23, 2019

      cialis online

      Phosphodiesterase-5 (PDE-5) inhibitors are one of the most widely used and effective types of medication for treating erectile dysfunction. During this exam, a health care professional may inject medicine into your penis to create an erection. In some cases, a health care professional may insert the medicine into your urethra instead. http://buycialis.online/blog/enjoy-with-cialis.html