Published in


What is OOCSS(Object Oriented CSS)?

OOCSS (Object Oriented CSS) is a CSS methodology created by Nicole Sullivan in 2008.

Object Oriented word comes from Ruby and Javascript. Nicole Sullivan define concept of “object” as self repititive stuructures.

Main purpose of OOCSS is to get the elements used and repeated within the page as a object and use them where necessary.

OOCSS has 2 main principle

  • Separation the structure from the skin
  • Separation the container from the content

Structure and design files are separate files. Sturucture means : “width, height, padding, margin , position” . Design means: “border, color, font, background” . Design files and Sturucture files must be seperated.




This prinsiple suggests that the child-sellectors should be uses less.

If <h2> element used in more than one place on the site , then the use of child selectors violates OOCSS rule and leads to code dublication.


Without OOCSS


The use of OOCSS

  • As your project grows, the size of CSS files increase then reduces the code speed.We can control the css size when writing code with OOCSS.
  • Your codes become understandable
  • In OOCSS, snippets are encoded in CSS and expanded in HTML.

OOCSS website:



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store