Hands-On UX Design for Developers

Object-Oriented CSS (OOCSS)

This CSS methodology was first introduced in early 2009, and it has two main principles when it comes to organizing CSS.

The first one is to properly separate the entire structure of our CSS code from themes styles or, sometimes known on CSS as, the skins.

Using this approach, we divide CSS that has anything to do with the layout of the pages, such as floats, flexbox, or grids, from styling skin components such as colors, fonts, shapes, and animations.

So, using OOCSS, we have the following two groups where we write the CSS:

• Structure (CSS Layouts, grids, alignments, and hierarchy)
• Skin (colors, backgrounds, fonts, and shapes)

This CSS methodology is a great approach, and it provides a log of guidelines on how ...