diff --git a/packages/heml-elements/src/Block.js b/packages/heml-elements/src/Block.js
index 848a5d1..a8668a8 100644
--- a/packages/heml-elements/src/Block.js
+++ b/packages/heml-elements/src/Block.js
@@ -19,15 +19,11 @@ export default createElement('block', {
   containsText: true,
 
   rules: {
-    '.block': [ { '@pseudo': 'root' }, { display: trueHide('block') }, margin, width ],
-
-    '.block__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
-
-    '.block__table': [ { '@pseudo': 'table' }, table ],
-
-    '.block__row': [ { '@pseudo': 'row' } ],
-
-    '.block__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius, 'vertical-align' ]
+    root: [ { display: trueHide('block') }, margin, width ],
+    table__ie: [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
+    table: [ table ],
+    row: [ ],
+    cell: [ height, background, box, padding, border, borderRadius, 'vertical-align' ]
   },
 
   css (Style) {
@@ -35,13 +31,13 @@ export default createElement('block', {
   },
 
   render (attrs, contents) {
-    attrs.class += ' block'
+    const { rules, ...defaultAttrs } = attrs
     return (
-      <div {...attrs}>
-        {condition('mso | IE', `<table class="block__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
-        <table class='block__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
-          <tr class='block__row'>
-            <td class='block__cell' width='100%' align='left' valign='top'>{contents}</td>
+      <div {...defaultAttrs} {...rules.root}>
+        {condition('mso | IE', `<table class="${rules.table__ie.className.join((' '))}" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
+        <table {...rules.table} role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
+          <tr {...rules.row}>
+            <td {...rules.cell} width='100%' align='left' valign='top'>{contents}</td>
           </tr>
         </table>
         {condition('mso | IE', `</td></tr></table>`)}
diff --git a/packages/heml-elements/src/Body.js b/packages/heml-elements/src/Body.js
index 9d2c374..fa76ac1 100644
--- a/packages/heml-elements/src/Body.js
+++ b/packages/heml-elements/src/Body.js
@@ -13,13 +13,9 @@ export default createElement('body', {
   containsText: true,
 
   rules: {
-    '.body': [ { '@pseudo': 'root' }, background ],
-
-    '.bodyTable': [ { '@pseudo': 'table' }, '@default', background ],
-
-    '.body__content': [ { '@pseudo': 'content' }, padding, font, text ],
-
-    '.preview': [ { 'background-color': transforms.convertProp('color') } ]
+    root: [ background ],
+    table: [ '@default', background ],
+    content: [ padding, font, text ]
   },
 
   css (Style) {
@@ -36,14 +32,14 @@ export default createElement('body', {
   },
 
   async render (attrs, contents) {
-    attrs.class += ' body'
+    const { rules, ...defaultAttrs } = attrs
 
     return (
-      <body {...attrs} style='margin: 0; width: 100%;'>
+      <body {...defaultAttrs} {...rules.root} style='margin: 0; width: 100%;'>
         {Preview.flush()}
-        <table class='bodyTable' role='presentation' width='100%' align='left' border='0' cellpadding='0' cellspacing='0' style='margin: 0;'>
+        <table {...rules.table} role='presentation' width='100%' align='left' border='0' cellpadding='0' cellspacing='0' style='margin: 0;'>
           <tr>
-            <td class='body__content' align='left' width='100%' valign='top'>{contents}</td>
+            <td {...rules.content} align='left' width='100%' valign='top'>{contents}</td>
           </tr>
         </table>
         <div style='display:none; white-space:nowrap; font-size:15px; line-height:0;'>{'&nbsp; '.repeat(30)}</div>
diff --git a/packages/heml-elements/src/Button.js b/packages/heml-elements/src/Button.js
index db0ee7d..c2aaebc 100644
--- a/packages/heml-elements/src/Button.js
+++ b/packages/heml-elements/src/Button.js
@@ -21,19 +21,11 @@ export default createElement('button', {
   },
 
   rules: {
-    '.button': [
-      { '@pseudo': 'root' }, { display: transforms.trueHide('block') } ],
-
-    '.button__table': [
-      { '@pseudo': 'table' }, margin, table ],
-
-    '.button__cell': [
-      { '@pseudo': 'cell' }, background, padding, borderRadius, border, height, width, box ],
-
-    '.button__link': [
-      { '@pseudo': 'link' }, background, text, font ],
-    '.button__text': [
-      { '@pseudo': 'text' }, 'color', 'text-decoration' ]
+    root: [ { display: transforms.trueHide('block') } ],
+    table: [ margin, table ],
+    cell: [ background, padding, borderRadius, border, height, width, box ],
+    link: [ background, text, font ],
+    text: [ 'color', 'text-decoration' ]
   },
 
   css (Style) {
@@ -50,18 +42,18 @@ export default createElement('button', {
   },
 
   render (attrs, contents) {
-    attrs.class += ' button'
+    const { rules, ...defaultAttrs } = attrs
 
     return (
-      <div {...omit(attrs, [ 'href', 'target' ])}>
+      <div {...omit(defaultAttrs, [ 'href', 'target' ])} {...rules.root}>
         <table role='presentation' width='100%' align='left' border='0' cellpadding='0' cellspacing='0'>
           <tr>
             <td>
-              <table role='presentation' width='auto' align='center' border='0' cellspacing='0' cellpadding='0' class='button__table'>
+              <table  {...rules.table} role='presentation' width='auto' align='center' border='0' cellspacing='0' cellpadding='0'>
                 <tr>
-                  <td align='center' class='button__cell'>
-                    <a {...pick(attrs, [ 'href', 'target' ])} class='button__link' style='display: inline-block;'>
-                      <span class='button__text'>{contents}</span>
+                  <td  {...rules.cell} align='center'>
+                    <a  {...rules.link} {...pick(attrs, [ 'href', 'target' ])} style='display: inline-block;'>
+                      <span {...rules.text}>{contents}</span>
                     </a>
                   </td>
                 </tr>
diff --git a/packages/heml-elements/src/Column.js b/packages/heml-elements/src/Column.js
index 11e3364..af5d655 100644
--- a/packages/heml-elements/src/Column.js
+++ b/packages/heml-elements/src/Column.js
@@ -17,7 +17,7 @@ export default createElement('column', {
   containsText: true,
 
   rules: {
-    '.column': [ { '@pseudo': 'root' }, { display: transforms.trueHide(undefined, true) }, background, box, padding, border, borderRadius, 'vertical-align' ]
+    root: [ { display: transforms.trueHide(undefined, true) }, background, box, padding, border, borderRadius, 'vertical-align' ]
   },
 
   css (Style) {
@@ -35,16 +35,11 @@ export default createElement('column', {
   },
 
   render (attrs, contents) {
-    const small = parseInt(attrs.small, 10)
-    const large = parseInt(attrs.large, 10)
-    const largeWidth = `${Math.round((100 * large) / 12)}%`
-    attrs.class += ` column col-sm-${small}`
-
-    delete attrs.large
-    delete attrs.small
+    const { small, large, rules, ...defaultAttrs } = attrs
+    const largeWidth = `${Math.round((100 * parseInt(large, 10)) / 12)}%`
 
     return (
-      <td {...attrs} width={largeWidth} style={`width: ${largeWidth};`} align='left' valign='top'>
+      <td {...defaultAttrs} {...rules.root} class={`column col-sm-${parseInt(small, 10)}`} width={largeWidth} style={`width: ${largeWidth};`} align='left' valign='top'>
         {contents.length === 0 ? '&nbsp;' : contents}
       </td>)
   }
diff --git a/packages/heml-elements/src/Container.js b/packages/heml-elements/src/Container.js
index c93fa62..cad5a5c 100644
--- a/packages/heml-elements/src/Container.js
+++ b/packages/heml-elements/src/Container.js
@@ -19,15 +19,11 @@ export default createElement('container', {
   containsText: true,
 
   rules: {
-    '.container': [ { '@pseudo': 'root' }, { display: trueHide('block') }, margin, width ],
-
-    '.container__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
-
-    '.container__table': [ { '@pseudo': 'table' }, table ],
-
-    '.container__row': [ { '@pseudo': 'row' } ],
-
-    '.container__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius ]
+    root: [ { display: trueHide('block') }, margin, width ],
+    table__ie: [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
+    table: [ table ],
+    row: [],
+    cell: [ height, background, box, padding, border, borderRadius ]
   },
 
   css (Style) {
@@ -41,13 +37,14 @@ export default createElement('container', {
   },
 
   render (attrs, contents) {
-    attrs.class += ' container'
+    const { rules, ...defaultAttrs } = attrs
+
     return (
-      <div {...attrs}>
-        {condition('mso | IE', `<table class="container__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
-        <table class='container__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
-          <tr class='container__row'>
-            <td class='container__cell' width='100%' align='left' valign='top'>{contents}</td>
+      <div {...defaultAttrs} {...rules.root}>
+        {condition('mso | IE', `<table class="${rules.table__ie.className.join((' '))}" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
+        <table {...rules.table} role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%'>
+          <tr {...rules.row}>
+            <td {...cell} width='100%' align='left' valign='top'>{contents}</td>
           </tr>
         </table>
         {condition('mso | IE', `</td></tr></table>`)}
diff --git a/packages/heml-elements/src/Hr.js b/packages/heml-elements/src/Hr.js
index 27787ff..84dfbff 100644
--- a/packages/heml-elements/src/Hr.js
+++ b/packages/heml-elements/src/Hr.js
@@ -19,15 +19,11 @@ export default createElement('hr', {
   children: false,
 
   rules: {
-    '.hr': [ { '@pseudo': 'root' }, { display: trueHide() }, margin, width ],
-
-    '.hr__table__ie': [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
-
-    '.hr__table': [ { '@pseudo': 'table' }, table ],
-
-    '.hr__row': [ { '@pseudo': 'row' } ],
-
-    '.hr__cell': [ { '@pseudo': 'cell' }, height, background, box, padding, border, borderRadius, 'vertical-align' ]
+    root: [ { display: trueHide() }, margin, width ],
+    table__ie: [ 'width', 'max-width', { [margin]: ieAlignFallback } ],
+    table: [ table ],
+    row: [ ],
+    cell: [ height, background, box, padding, border, borderRadius, 'vertical-align' ]
   },
 
   css (Style) {
@@ -42,13 +38,14 @@ export default createElement('hr', {
 
 
   render (attrs, contents) {
-    attrs.class += ' hr'
+    const { rules, ...defaultAttrs } = attrs
+
     return (
-      <div {...attrs}>
-        {condition('mso | IE', `<table class="hr__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
-        <table class='hr__table' role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%' style='table-layout: fixed;'>
-          <tr class='hr__row'>
-            <td class='hr__cell' width='100%' align='left' valign='top'>{`&nbsp;`}</td>
+      <div {...defaultAttrs} {...rules.root}>
+        {condition('mso | IE', `<table class="${rules.table__ie.className.join((' '))}" role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>`)}
+        <table {...rules.table} role='presentation' border='0' align='center' cellpadding='0' cellspacing='0' width='100%' style='table-layout: fixed;'>
+          <tr {...rules.row}>
+            <td {...rules.cell} width='100%' align='left' valign='top'>{`&nbsp;`}</td>
           </tr>
         </table>
         {condition('mso | IE', `</td></tr></table>`)}
diff --git a/packages/heml-elements/src/Img.js b/packages/heml-elements/src/Img.js
index 681dc53..35b9d26 100644
--- a/packages/heml-elements/src/Img.js
+++ b/packages/heml-elements/src/Img.js
@@ -14,7 +14,7 @@ export default createElement('img', {
   },
 
   rules: {
-    'img': [ { '@pseudo': 'root' }, { display: transforms.trueHide() }, '@default' ]
+    root: [ { display: transforms.trueHide() }, '@default' ]
   },
 
   css (Style) {
@@ -23,20 +23,27 @@ export default createElement('img', {
         display: block;
         max-width: 100%;
       }
+
+      .img__inline {
+        display: inline-block;
+      }
     `}</Style>
   },
 
   async render (attrs, contents) {
-    const isBlock = !attrs.inline
+    let { infer, src, width, rules, inline, ...defaultAttrs } = attrs
 
-    if (!!attrs.infer && has(attrs, 'src') && !attrs.width) {
-      attrs.width = await getWidth(attrs.src, attrs.infer === 'retina')
+    if (!!infer && !!src && !width) {
+      width = await getWidth(src, infer === 'retina')
     }
 
-    attrs.class += ` ${isBlock ? 'img__block' : 'img__inline'}`
-    attrs.style = isBlock ? '' : 'display: inline-block;'
 
-    return <img {...omit(attrs, 'inline', 'infer')} />
+
+    return <img {...rules.root}
+      src={src}
+      width={width || 'auto'}
+      {...defaultAttrs}
+      class={!inline ? 'img__block' : 'img__inline'} />
   }
 })
 
diff --git a/packages/heml-elements/src/Row.js b/packages/heml-elements/src/Row.js
index e17c473..5773777 100644
--- a/packages/heml-elements/src/Row.js
+++ b/packages/heml-elements/src/Row.js
@@ -5,19 +5,18 @@ export default createElement('row', {
   children: [ 'column' ],
 
   rules: {
-    '.row': [ { '@pseudo': 'root' }, { display: transforms.trueHide('block') } ],
-
-    '.row__table': [ { '@pseudo': 'table' } ],
-
-    '.row__row': [ { '@pseudo': 'row' } ]
+    root: [ { display: transforms.trueHide('block') } ],
+    table: [ ],
+    row: [ ]
   },
 
   render (attrs, contents) {
-    attrs.class += ' row'
+    const { rules, ...defaultAttrs } = attrs
+
     return (
-      <div {...attrs}>
-        <table class='row__table' width='100%' align='center' role='presentation' border='0' cellpadding='0' cellspacing='0' style='table-layout: fixed;'>
-          <tr class='row__row'>{contents}</tr>
+      <div {...defaultAttrs} {...rules.root}>
+        <table {...rules.table} width='100%' align='center' role='presentation' border='0' cellpadding='0' cellspacing='0' style='table-layout: fixed;'>
+          <tr {...rules.row}>{contents}</tr>
         </table>
       </div>)
   },
diff --git a/packages/heml-elements/src/Table.js b/packages/heml-elements/src/Table.js
index f9111a0..e1ce934 100644
--- a/packages/heml-elements/src/Table.js
+++ b/packages/heml-elements/src/Table.js
@@ -3,39 +3,36 @@ import HEML, { createElement, transforms } from '@heml/utils' // eslint-disable-
 const Table = createElement('table', {
   attrs: true,
   containsText: true,
-  rules: {
-    '.table': [ { '@pseudo': 'root' }, '@default', { display: transforms.trueHide('table') } ]
-  },
+  rules: { root: [ '@default', { display: transforms.trueHide('table') } ] },
 
   render (attrs, contents) {
-    attrs.class += ' table'
-    return <table {...attrs}>{contents}</table>
+    const { rules, ...defaultAttrs } = attrs
+
+    return <table {...defaultAttrs} {...rules.root}>{contents}</table>
   }
 })
 
 const Tr = createElement('tr', {
   attrs: true,
   containsText: true,
-  rules: {
-    '.tr': [ { '@pseudo': 'root' }, '@default' ]
-  },
+  rules: { root: [ '@default' ] },
 
   render (attrs, contents) {
-    attrs.class += ' tr'
-    return <tr {...attrs}>{contents}</tr>
+    const { rules, ...defaultAttrs } = attrs
+
+    return <tr {...defaultAttrs} {...rules.root}>{contents}</tr>
   }
 })
 
 const Td = createElement('td', {
   attrs: true,
   containsText: true,
-  rules: {
-    '.td': [ { '@pseudo': 'root' }, '@default' ]
-  },
+  rules: { root: [ '@default' ] },
 
   render (attrs, contents) {
-    attrs.class += ' td'
-    return <td {...attrs}>{contents}</td>
+    const { rules, ...defaultAttrs } = attrs
+
+    return <td {...defaultAttrs} {...rules.root}>{contents}</td>
   }
 })
 
diff --git a/packages/heml-elements/src/Typography.js b/packages/heml-elements/src/Typography.js
index e29f1ad..17012a8 100644
--- a/packages/heml-elements/src/Typography.js
+++ b/packages/heml-elements/src/Typography.js
@@ -24,12 +24,12 @@ function createTextElement (name, element = {}) {
   return createElement(name, merge({
     attrs: true,
     rules: {
-      [`.${name}.${classToAdd}`]: [ { '@pseudo': 'root' }, '@default', { display: transforms.trueHide() }, margin, background, border, borderRadius, text, font ]
+      root: [ '@default', { display: transforms.trueHide() }, margin, background, border, borderRadius, text, font ]
     },
     render (attrs, contents) {
-      attrs.class += ` ${classToAdd} ${name}`
+      const { rules, ...defaultAttrs } = attrs
 
-      return <Tag {...attrs}>{contents}</Tag>
+      return <Tag {...defaultAttrs} {...rule.root} class={classToAdd}>{contents}</Tag>
     }
   }, element))
 }
@@ -50,13 +50,14 @@ const A = createElement('a', {
   defaultAttrs: { href: '#' },
 
   rules: {
-    '.a': [ { '@pseudo': 'root' }, { '@default': true }, { display: transforms.trueHide('inline') }, 'color', 'text-decoration' ],
-    '.a__text': [ { '@pseudo': 'text' }, 'color', 'text-decoration' ]
+    root: [ '@default', { display: transforms.trueHide('inline') }, 'color', 'text-decoration' ],
+    text: [ 'color', 'text-decoration' ]
   },
 
   render (attrs, contents) {
-    attrs.class += ' a'
-    return <a {...attrs}><span class='a__text'>{contents}</span></a>
+    const { rules, ...defaultAttrs } = attrs
+
+    return <a {...defaultAttrs} {...rules.root}><span {...rules.text}>{contents}</span></a>
   }
 })
 
diff --git a/packages/heml-render/src/renderElement.js b/packages/heml-render/src/renderElement.js
index 1053ff0..8cf76ef 100644
--- a/packages/heml-render/src/renderElement.js
+++ b/packages/heml-render/src/renderElement.js
@@ -1,5 +1,5 @@
 import isPromise from 'is-promise'
-import { isPlainObject, defaults, mapValues, castArray, compact, flattenDeep } from 'lodash'
+import { isPlainObject, isString, defaults, mapValues, castArray, compact, flattenDeep, map, keys, first } from 'lodash'
 import createHtmlElement from './createHtmlElement'
 
 export default function (name, attrs, ...contents) {
@@ -15,15 +15,7 @@ function render (name, attrs, contents) {
   }
 
   if (isPlainObject(name) && name.render) {
-    /** set the defaults and massage attribute values */
-    attrs = defaults({}, attrs, name.defaultAttrs || {})
-    attrs = mapValues(attrs, (value, name) => {
-      if ((value === '' && name !== 'class') || value === 'true' || value === 'on') { return true }
-
-      if (value === 'false' || value === 'off') { return false }
-
-      return value
-    })
+    const element = name
 
     /**
      * custom elements can return promises, arrays, or strings
@@ -33,11 +25,11 @@ function render (name, attrs, contents) {
      * 2. return a string synchronously if we can
      * 3. return a string in a promise
      */
-    const renderResults = castArray(name.render(attrs, contents))
+    const renderResults = castArray(element.render(prepareElementAttributes(element, attrs), contents))
 
     /** 1. catch shorthands for rerendering the element */
     if (renderResults.length === 1 && renderResults[0] === true) {
-      return render(name.tagName, attrs, contents)
+      return render(element.tagName, attrs, contents)
     }
 
     /** 2. we want to return synchronously if we can */
@@ -53,7 +45,56 @@ function render (name, attrs, contents) {
 
   /** if we have a regular ol element go ahead and convert it to a string */
   if (attrs && attrs.class === '') { delete attrs.class }
-  if (attrs && attrs.class) { attrs.class = attrs.class.trim() }
+  if (attrs && isString(attrs.class)) { attrs.class = attrs.class.trim() }
 
   return createHtmlElement({ name, attrs, contents })
 }
+
+
+function prepareElementAttributes(element, attrs) {
+  /** set the defaults and massage attribute values */
+  attrs = defaults({}, attrs, element.defaultAttrs || {})
+  attrs = mapValues(attrs, (value, name) => {
+    if ((value === '' && name !== 'class') || value === 'true' || value === 'on') { return true }
+
+    if (value === 'false' || value === 'off') { return false }
+
+    return value
+  })
+
+  /** set up the rules attribute to mirror the rules set on the element */
+  if (element.rules) {
+    attrs.rules = {}
+
+    const childClasses = buildChildClasses(attrs)
+
+    for (let [ selector, decls ] of Object.entries(element.rules)) {
+      const pseudo = findPseudo(decls)
+
+      attrs.rules[pseudo || selector] = {
+        className: [ ...compact(selector.split('.')), ...(pseudo === 'root' ? attrs.class.split(/\s+/) : childClasses) ]
+      }
+    }
+
+    delete attrs.class
+  }
+
+  return attrs
+}
+
+function buildChildClasses({ id, class: classes }) {
+  classes = isString(classes) ? compact(classes.split(/\s+/)) : classes
+
+  const childClasses = classes.map((c) => `c-${c}`)
+
+  return !!id ? [ `i-${id}`, ...childClasses ] : childClasses
+}
+
+function findPseudo(decls) {
+  for (let decl of decls) {
+    const firstKey = first(keys(decl))
+    if (isPlainObject(decl) && firstKey === '@pseudo') {
+      return decl = decl[firstKey]
+    }
+  }
+}
diff --git a/packages/heml-render/src/stringifyAttributes.js b/packages/heml-render/src/stringifyAttributes.js
index 1f1824b..703bc96 100644
--- a/packages/heml-render/src/stringifyAttributes.js
+++ b/packages/heml-render/src/stringifyAttributes.js
@@ -1,12 +1,23 @@
 /** escapeless version of npmjs.com/stringify-attributes */
 export default function stringifyAttributes (attrsObj) {
   const attributes = []
+  const className = attrsObj['className']
+
+  if (className) {
+    delete attrsObj.className
+    attrsObj['class'] = attrsObj['class'] || ''
+  }
+
 
   for (let [ key, value ] of Object.entries(attrsObj)) {
     if (value === false) { continue }
 
     if (Array.isArray(value)) { value = value.join(' ') }
 
+    if (key === 'class' && className) {
+      value = `${value} ${Array.isArray(className) ? className.join(' ') : String(className)}`.trim()
+    }
+
     value = value === true ? '' : `="${String(value)}"`
 
     attributes.push(`${key}${value}`)
diff --git a/packages/heml-utils/package-lock.json b/packages/heml-utils/package-lock.json
index 4209c69..af06994 100644
--- a/packages/heml-utils/package-lock.json
+++ b/packages/heml-utils/package-lock.json
@@ -1,6 +1,8 @@
 {
-	"requires": true,
+	"name": "@heml/utils",
+	"version": "1.1.2",
 	"lockfileVersion": 1,
+	"requires": true,
 	"dependencies": {
 		"css-groups": {
 			"version": "0.1.1",
@@ -11,6 +13,11 @@
 			"version": "4.17.4",
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
 			"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+		},
+		"shorthash": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/shorthash/-/shorthash-0.0.2.tgz",
+			"integrity": "sha1-WbJo7sveWQOLMNogK8+93rLEpOs="
 		}
 	}
 }
diff --git a/packages/heml-utils/package.json b/packages/heml-utils/package.json
index 9e8a5c7..524cf2a 100644
--- a/packages/heml-utils/package.json
+++ b/packages/heml-utils/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@heml/render": "^1.1.2",
     "css-groups": "^0.1.1",
-    "lodash": "^4.17.4"
+    "lodash": "^4.17.4",
+    "shorthash": "0.0.2"
   }
 }
diff --git a/packages/heml-utils/src/createElement.js b/packages/heml-utils/src/createElement.js
index e39b887..c4c0f2c 100644
--- a/packages/heml-utils/src/createElement.js
+++ b/packages/heml-utils/src/createElement.js
@@ -1,4 +1,5 @@
-import { defaults, isFunction } from 'lodash'
+import { defaults, isFunction, mapKeys, mapValues } from 'lodash'
+import hash from './hash'
 
 const textRegex = /^(text(-([^-\s]+))?(-([^-\s]+))?|word-(break|spacing|wrap)|line-break|hanging-punctuation|hyphens|letter-spacing|overflow-wrap|tab-size|white-space|font-family|font-weight|font-style|font-variant|color)$/i
 
@@ -11,6 +12,16 @@ export default function (name, element) {
     element = { render: element }
   }
 
+  if (element.rules) {
+    element.rules = mapValues(element.rules, (decls, key) => {
+      return [ { '@pseudo': key }, ...decls ]
+    })
+
+    element.rules = mapKeys(element.rules, (decls, key) => {
+      return `.${hash(name)}__${key}`
+    })
+  }
+
   if (element.containsText) {
     element.rules = element.rules || {}
     element.rules['.header'] = [ textRegex ]
diff --git a/packages/heml-utils/src/hash.js b/packages/heml-utils/src/hash.js
new file mode 100644
index 0000000..5e6a4dd
--- /dev/null
+++ b/packages/heml-utils/src/hash.js
@@ -0,0 +1,5 @@
+import { unique as shorthash } from 'shorthash'
+
+export default function hash(str, prefix = 'h') {
+  return `${prefix}${shorthash(str)}`
+}
