How do you differentiate between an object and component in BEM?

[maoberlehner]

I get asked this quite a lot, and it is actually quite hard to explain.As a general rule: if a user can identify it, it’s probably a component; if it’s private to developers (e.g. your grid system) it’s probably an object. I think the best way to differentiate is like this:

An object:

• is purely structural: it only provides structure and scaffolding (e.g. a grid system)
• has no cosmetics: they can’t have font-sizes, colours, etc. applied to them
• is ‘invisible’: objects don’t actually look like anything identifiable

A component:

• actually looks like a thing: users can usually name components (e.g. a button, a carousel).
• usually encapsulates a piece of functionality (e.g. a date picker).
• has (structure and) cosmetics: components introduce colours, font styles, etc.