Difference between object and component?

[densityx]

Hello, I really love the concept/architecture of ITCSS but I am having hard time understanding/comparing Object and Component

Those thing are almost the same, how can i differentiate it?

@import "bower_components/inuit-buttons/objects.buttons";
@import "bower_components/inuit-layout/objects.layout";
@import "bower_components/inuit-media/objects.media";

@import "components.page-head";
@import "components.page-foot";
@import "components.site-nav";
@import "components.ads";
@import "components.promo";

As we can see here that the object host the buttons and media while the component are the site-nav and ads .... I just can't differentiate it.. How can they different from each other?

Thank you

[fsmanuel]

@densityx as I understand the concept objects are general purpose. Like the media object that helps you to have media (image) and text aligned. It's more the behavior of such an object without any styles. Components are YOUR code. They are specific to your site and your style. You can combine them:

<div class="c-teaser>
  <div class="media">
    <div class="media__img c-teaser__img">
      <img scr="url">
    </div>
    <div class="media__body c-teaser__body">
      Text
    </div>
  </div>
</div>

You use the functionality of the media object and add your teaser styles on top of it. Now if you need the media object reversed you can do:

<div class="c-teaser>
  <div class="media--rev">
    <div class="media__img c-teaser__img">
      <img scr="url">
    </div>
    <div class="media__body c-teaser__body">
      Text
    </div>
  </div>
</div>

So the behavior of the media changes but your teaser component styles it the same.

[densityx]

Got it :+1: thank's for the explanation

[edbentinck]

Some of the concepts are really quite ambiguous. For instance, in inuitcss buttons are defined as Objects, but Harry himself most often refers to them as Components. I actually asked him about this a while ago, and he cautiously answered that they should probably be defined as Components. My personal belief is that "it depends".

_(as a quick side note: in @fsmanuel's second example of the media object, it's important to remember that modifiers should only ever be added as an extension of a block or element, and never on their own. i.e. – media media--rev instead of just media--rev, otherwise you're likely to start repeating code)_

The basis of my understanding of Objects and Components is, as quoted by Harry, and with highlights for emphasis:

o-: Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.

c-: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.

If we're to follow the above rules, then Harry stating that buttons are components seems a bit contradictory in my view. Surely buttons fit in perfectly with the definition of an object?

I actually think buttons can be both. In reality they are both UI components, the only difference is the scope. 'Components' are context-specific, and Objects can be implemented globally – or in other words, if a component will be used in more than one place on your site then it should be considered an 'Object'.

With this in mind I always write my CSS asking myself the following question: "Is this component context-specific?" If the answer is no, and I think it's likely that I'll be implementing the same component elsewhere on my site, then I write it as an object. If the answer is yes, and it's the only place I'll need it, then I write it as a component.

But doesn't that mean a component could potentially be "upgraded" at a later stage to an object? I believe it does, and I actually don't have any problem with that. As with any other programming practice, I think it's ok for your CSS to be refactored at a later stage. That said, I always try to plan ahead to avoid any unnecessary refactoring.

Having said all that, I don't think there is a right answer. I think it's fine to make your code your own, as long as you follow the same principles throughout a project.

[inlikealion]

Great response @edbentinck! I think you and @fsmanuel added clarity for new-to-inuit developers in understanding the distinctions.

[equinusocio]

o-: Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.

c-: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.

So a button is clearly a component. When you change a button style you are changing a scoped piece of css that is used only inside the button. There is no side effects on other elements. So it's not an object.

[AurelianSpodarec]

IMO a button, input/form etc... are objects/atoms.

They can build a component, a component or organism is made of objects/atoms. Therefore a carousel would be using a button/atom and with that we get an organism/component.

While a carousel will be re-used in many placees, its made of atoms. While the atom itself, e.g. button, is just a single attom that's ready to be used with other objects to form a component/organism.

I think it was ATOMIC Desing book that explained this.