Objects are used for design patterns, such as layouts, where items are being arranged rather than decorated. Object classes are used across the whole page (multiple times). So called "cosmetic free design patterns".

Global Prefix (namespace o-)

Directory Structure

/6_objects/
   /_/
        _transition.objects.scss
        _animation.objects.scss

   _objects.scss 

• transition.objects
• animation.objects

---

This is the most confusing layer in ITCSS. The difference between objects and components could become blurred if you overthink this layer too much. Best advice is to define only styles here that are functional (e.g. animations) or serve the purpose of layouting interface elements with abstract object classes.

Simple Examples:

.o-box-max-width{
  max-width: 500px;
}

.o-media{
  margin-bottom: 30px;
}

.o-media__img{
  margin-bottom: 0;
}

In the world of Vue/Nuxt the mayor work of writing styles should happen on level of components to avoid global styles as much as possible. Sometimes you will notice by writing the styles for components, that some of them have equal layout-styles. Instead of defining them over and over again, this is where abstract object-classes come into account.

---