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">{{> "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 & 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
コメント