Component

A stand-alone part of a page or interface.

<nav class="main-menu"></nav>

.main-menu {
  /* styles */
}

An element should be considered a Component (rather than a Child) if it doesn’t depend on other elements existing.

Naming

A Component is represented by a class. The class is named after what it is, never what it looks like, or its state.

Class names are formed of lowercase words, separated by a hyphen (-). You could use a camel-case if preferred; the crucial rules are to be consistent, and that underscores (_) are not permitted.

Nesting

Components can be nested within one another (in the markup, not in CSS).

illustration of a navigation component, inside a header component — Example of a **naviagtion component**, nested inside a *header component*.

Multiple instances

An interface can contain multiple instances of a Component. For example, you might have a button component, used for multiple buttons in your interface.

A distinction should be made between wanting multiple instances of a component, and wanting to reuse styles from a component. Just as a Component is defined by its function (not what it looks like), each instance of component should be related by function. Wanting a link to look like a button, is not a use-case for it being the same component as an element that behaves like a button.