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.

Comments

      December 12, 2018


      SannyMok

      Nice posts! 馃檪
      ___
      Sanny

      February 18, 2019


      tadalafil

      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

      March 29, 2019


      comprar viagra bolivia

      De hecho, los sentimientos de inutilidad y culpa inapropiada son uno de los criterios cl铆nicos para el trastorno depresivo mayor, de acuerdo con el DSM-5. La mayor铆a de las causas de la disfunci贸n er茅ctil pueden tratarse, los primeros resultados aparecen, aproximadamente, en 3 meses.

      May 13, 2019


      terapia

      Como los factores pueden ser muchos y muy variados, lo mismo sucede con sus tratamientos: no se solucionar谩 igual la disfunci贸n provocada por una lesi贸n en la vejiga que la generada por la diabetes.

      May 14, 2019


      tratamiento

      Cuando la causa sea la toma de un medicamento, ser谩 necesario evaluar si es conveniente suspender el tratamiento o cambiarlo por otro, en algunos casos ser谩 necesario esperar a que finalice para intentar reanudar la vida sexual. https://www.strawbalemarket.com/author/lipra24/

      May 16, 2019


      comprar cialis espa帽a

      Veja como preparar um ch谩 de alecrim, com chap茅u de couro e catuaba ou um xarope caseiro com mel, guaran谩 e ginseng para tratar a impot锚ncia sexual.

      May 16, 2019


      cialis gen茅rico

      No hay penetraci贸n, solo caricias, masturbaci贸n ligera y cualquier cosa que nos excite, pero sin llegar al final. https://comprarcialis.online/

      May 18, 2019


      Disfunci贸n er茅ctil y prostata

      En estos hombres entra帽a adem谩s una presi贸n m谩s alta que en personas mayores.

      May 19, 2019


      comprar levitra en espa帽a

      El m茅dico, por su parte, tratar谩 de encontrar la causa de la disfunci贸n er茅ctil para tratarla adecuadamente.

      May 24, 2019


      cialis

      Play safe and long with Cialis! Generic Cialis is a non-proprietary medicinal product, very popular among men who have problems with potency (erectile dysfunction).

      May 28, 2019


      comprar cialis gen茅rico

      Especialmente antidepresivos y antiepilepticos figuran entre ello. Comprar cialis generico en farmacias..

      May 29, 2019


      comprar medicamentos

      El resultado puede causar m斜s efectos secundarios de Cialis, adem斜s de una mayor actividad.

      June 22, 2019


      descripci贸n

      La ereccion refleja se produce normalmente de noche, en ausencia de estimulos y con la unica intervencion de la presion de la vejiga. PS: Si ven bien, la descripcion ya no es en ingles, eso es porque me di cuenta de que no vale la pena, la mayoria de la gente habla espa帽ol y los que hablan ingles, la mayoria sabe espa帽ol tambien.