BEM

BEM colors:

  • .primary
  • .secondary
  • .tertiary
  • .light
  • .dark

BEM code sample:

<div class="c-card">
  <img class="c-card-img" src="http://via.placeholder.com/350x150">
  <div class="c-card-header">
    Featured
  </div>
  <div class="c-card-body">
    <h4 class="c-card-title">Card title</h4>
    <div class="c-card-text">Card additional content.</div>
    <a href="#" class="button button-primary">Link</a>
  </div>
  <div class="c-card-footer">
    Posted 12 days ago
  </div>
</div>

Folder structure:

  • components: reusable components. For example: c-pager
  • layout: layout styles, like header, footer, sidebar
  • pages: context specific styles. For example: contact-us
  • utilities: utility helper classes with single function. Often using !important to boost their specificity. For example: u-text-center

Links:

Leave a Reply

Your email address will not be published. Required fields are marked *