Pug

Install Pug

$ npm install pug pug-loader --save-dev

You can find a handy Chrome extension that let's you select html then right-click and copy as Jade/Pug. I also found this online tool:
(check both boxes: "Bodyless" and "No commas in attributes"):
https://html2pug.herokuapp.com/

Pug lets us write out our template in a much more cleaner and effecient way.

Here's a Bulma card example using HTML:

<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Component
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </a>
  </header>
  <div class="card-content">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
      <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

Now compare with the same example, but using Pug's markup:

.card
  header.card-header
    p.card-header-title
      | Component
    a.card-header-icon(href="#" aria-label="more options")
      span.icon
        i.fa.fa-angle-down(aria-hidden="true")
  .card-content
    .content
      | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
      a(href="#") @bulmaio
      | . 
      a(href="#") #css
      a(href="#") #responsive
      br
      time(datetime="2016-1-1") 11:09 PM - 1 Jan 2016
  footer.card-footer
    a.card-footer-item(href="#") Save
    a.card-footer-item(href="#") Edit
    a.card-footer-item(href="#") Delete