A proposal for converting atomic HTML to semantic class names

index.md

The pitch

What if you could design components using atomic CSS, then publish them with more user-friendly semantic classes?

Example

Let's say you're using Tachyons, but you can't stomach the markup for its starup hero component:

<header class="sans-serif">
  <div class="cover bg-left bg-center-l" style="background-image: url(http://mrmrs.io/photos/u/011.jpg)">
    <div class="bg-black-80 pb5 pb6-m pb7-l">
      <nav class="dt w-100 mw8 center"> 
        <div class="dtc w2 v-mid pa3">
          <a href="/" class="dib w2 h2 pa1 ba b--white-90 grow-large border-box">
            <svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
          </a>
        </div>
        <div class="dtc v-mid tr pa3">
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >How it Works</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >Pricing</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >About</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >Careers</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dib ml2 pv2 ph3 ba" href="/" >Sign Up</a> 
        </div>
      </nav> 
      <div class="tc-l mt4 mt5-m mt6-l ph3">
        <h1 class="f2 f1-l fw2 white-90 mb0 lh-title">This is your super impressive headline</h1>
        <h2 class="fw1 f3 white-80 mt3 mb4">Now a subheadline where explain your wonderful new startup even more</h2>
        <a class="f6 no-underline grow dib v-mid bg-blue white ba b--blue ph3 pv2 mb3" href="/">Call to Action</a>
        <span class="dib v-mid ph3 white-70 mb3">or</span>
        <a class="f6 no-underline grow dib v-mid white ba b--white ph3 pv2 mb3" href="">Secondary call to action</a>
      </div>
    </div>
  </div> 
</header>

What if you could "freeze" this into CSS—or better yet, SCSS:

header {
  @include atoms(sans-serif);
  & > div {
    @include atoms(cover bg-left bg-center-l);
    & > div {
      @include atoms(bg-black-80 pb5 pb6-m pb7-l);
      & > nav {
        @include atoms(dt w-100 mw8 center);
        & > div {
          @include atoms(dtc w2 v-mid pa3);
          &:first-child a {
            @include atoms(dib w2 h2 pa1 ba b--white-90 grow-large border-box);
            svg {
              @include atoms(link white-90 hover-white);
            }
          }
          &:nth-child(n+1) a {
            @include atoms(f6 fw4 hover-white no-underline white-70 dn pv2 ph3);
            &:first-child,
            &:nth-child(n+2) {
              @include atoms(dib-ns);
            }
            &:nth-child(n+3):nth-child(-n+1) {
              @include atoms(dib-l);
            }
            &:last-child {
              @include atoms(dib);
            }
          }
          &:nth-child(-n+1) a {
            @include atoms(f6 fw4 hover-white no-underline white-70 dn pv2 ph3);
          }
        }
      }
    }
    & > div {
      @include atoms(tc-l mt4 mt5-m mt6-l ph3);
      h1 {
        @include atoms(f2 f1-l fw2 white-90 mb0 lh-title);
      }
      h2 {
        @include atoms(fw1 f3 white-80 mt3 mb4);
      }
      a {
        @include atoms(f6 no-underline grow dib v-mid white ba ph3 pv2 mb3);
        &:first-of-type {
          @include atoms(bg-blue b--blue);
        }
        &:last-of-type {
          @include atoms(b--white);
        }
      }
    }
  }
}

Looks great, right? Okay, maybe not. But look at the HTML:

<header>
  <div style="background-image: url(http://mrmrs.io/photos/u/011.jpg)">
    <div>
      <nav> 
        <div>
          <a href="/">
            <svg data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
          </a>
        </div>
        <div>
          <a href="/">How it Works</a> 
          <a href="/">Pricing</a> 
          <a href="/">About</a> 
          <a href="/">Careers</a> 
          <a href="/">Sign Up</a> 
        </div>
      </nav> 
      <div>
        <h1>This is your super impressive headline</h1>
        <h2>Now a subheadline where explain your wonderful new startup even more</h2>
        <a href="/">Call to Action</a>
        <span>or</span>
        <a href="">Secondary call to action</a>
      </div>
    </div>
  </div> 
</header>