Child

A Child could be thought of as a Component Child. A Child is a constituent part of a Component.

<ul class="main-menu"> <!-- Component -->
  <li class="main-menu_item"> <!-- Child -->
  </li>
</ul>

.main-menu_item {
  /* styles */
}

If an element is not intended to be used without its parent or sibling elements, it should be considered an Child, and thus belong to a Component.

Naming

Just like components, children are represented by a class, named after their purpose, and never their appearance or state. Class names are formed of the parent Component name, an underscore, and Child name. The child name is lowercase. If there are multiple words in the child section of the selector name, they are separated by a hyphen (-).

Nesting

As well as being nested with a Component (in the markup, not in CSS), children can also be nested within one another. Note, the first prefix of the selector name is still derived from the Component.

<ul class="main-menu"> <!-- Component -->
  <li class="main-menu_item"> <!-- Child -->
    <a class="main-menu_link"></a> <!-- Child -->
  </li>
  <li class="main-menu_item"> <!-- Child -->
    <a class="main-menu_link"></a> <!-- Child -->
  </li>
</ul>

Multiple instances

A Component can contain multiple instances of a Child. For example, you might have a menu component which contains multiple menu items.