Componetization – how to name components?

When & how should I separate component and name them?
Divide list and the element, mainComp-list are mainComponent separated as different component
mainComp-list can be wrapper name, mainComp-list__item can be an actual item name
mainComp can be wrapped by mainComponent-list
mainComp includes mainComp-header component which has bunch of elements
mainComp can have general name elements such as image, contents, name, description
If you use wrapper, the element should inside mainComp component like

<div class="header-top">
<div class="header-top__wrapper">
<div class="header-top__hours">{{&gt; "hours-status-markup" }}</div>
<div class="header-top__logo"></div>
<div class="header-top__search">Search Q</div>
</div>
</div>
Table component example
<table class="hours-table hours-table--grouped">
<tbody>
<tr class="hours-table__row hours-table__row--current hours-table__row--today">
<td class="hours-table__label">Monday - Friday:</td>
<td class="hours-table__times">9 AM-10 PM</td>
</tr>
<tr class="hours-table__row">
<td class="hours-table__label">Saturday:</td>
<td class="hours-table__times">8:30 AM-10:30 PM</td>
</tr>
<tr class="hours-table__row">
<td class="hours-table__label">Sunday:</td>
<td class="hours-table__times">10 AM-7 PM</td>
</tr>
</tbody>
</table>
Segment, multiple nested items example
<div class="hours-banner">
<div class="hours-banner__segment hours-banner__segment--today">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label">Today:</div>
<div class="hours-banner__hours">8am—6pm</div>
</div>
</div>
<div class="hours-banner__inner">
<div class="hours-banner__segment">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label">Monday-Friday:</div>
<div class="hours-banner__hours">10pm—9pm</div>
</div>
</div>
<div class="hours-banner__segment">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label">Saturday:</div>
<div class="hours-banner__hours">9:30am—9pm</div>
</div>
</div>
</div>
<div class="hours-banner__segment hours-banner__segment--special">
<div class="hours-banner__segment-contents">
<div class="hours-banner__label"><a href="#">View Special &amp;
Holiday Hours</a></div>
</div>
</div>
</div>

Another nested example

<div class="accordion-list">
<div class="accordion-list__item">
<div class="accordion">
<div class="accordion-header">Lorem ipsum dolor</div>
<div class="accordion__body">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dignissimos pariatur accusamus!</h2>
<h3>Accordion Contents</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit velit, molestias dolores voluptas.

</div>
</div>
</div>
<div class="accordion-list__item">
<div class="accordion">
<div class="accordion-header">Lorem ipsum dolor</div>
<div class="accordion__body">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dignissimos pariatur accusamus!</h2>
<h3>Accordion Contents</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit velit, molestias dolores voluptas.

</div>
</div>
</div>
</div>

You can see other good example here. This one uses the following convention.
directory-listing
__container
__container-inner
directory-group
__contents
__entries
__entry
directory-entry
__title
__contents
__section
__telephone
__level
__notices
__notice
__icons
__icon