diff --git a/compiler/Parser.js b/compiler/Parser.js
index 8c3b03e0c..16e80dc67 100644
--- a/compiler/Parser.js
+++ b/compiler/Parser.js
@@ -18,7 +18,6 @@ function isIEConditionalComment(comment) {
 }
 
 function replacePlaceholderEscapeFuncs(node, context) {
-
     var walker = context.createWalker({
         exit: function(node, parent) {
             if (node.type === 'FunctionCall' &&
@@ -36,6 +35,39 @@ function replacePlaceholderEscapeFuncs(node, context) {
     return walker.walk(node);
 }
 
+function mergeShorthandClassNames(el, shorthandClassNames, context) {
+    var builder = context.builder;
+    let classNames = shorthandClassNames.map((className) => {
+        return builder.parseExpression(className.value);
+    });
+
+    var classAttr = el.getAttributeValue('class');
+    if (classAttr) {
+        classNames.push(classAttr);
+    }
+
+    let prevClassName;
+
+    var finalClassNames = [];
+
+    for (var i=0; i<classNames.length; i++) {
+        let className = classNames[i];
+        if (prevClassName && className.type === 'Literal' && prevClassName.type === 'Literal') {
+            prevClassName.value += ' ' + className.value;
+        } else {
+            finalClassNames.push(className);
+        }
+        prevClassName = className;
+    }
+
+    if (finalClassNames.length === 1) {
+        el.setAttributeValue('class', finalClassNames[0]);
+    } else {
+        var classListVar = context.addStaticVar('__classList', '__helpers.cl');
+        el.setAttributeValue('class', builder.functionCall(classListVar, finalClassNames));
+    }
+}
+
 class Parser {
     constructor(parserImpl) {
         ok(parserImpl, '"parserImpl" is required');
@@ -160,6 +192,17 @@ class Parser {
 
         var node = this.context.createNodeForEl(elDef);
 
+        if (el.shorthandClassNames) {
+            mergeShorthandClassNames(node, el.shorthandClassNames, context);
+        }
+
+        if (el.shorthandId) {
+            if (node.hasAttribute('id')) {
+                context.addError(node, 'A shorthand ID cannot be used in conjunction with the "id" attribute');
+            } else {
+                node.setAttributeValue('id', builder.parseExpression(el.shorthandId.value));
+            }
+        }
 
         this.parentNode.appendChild(node);
 
diff --git a/runtime/helpers.js b/runtime/helpers.js
index e4742099d..7a3a3ba13 100644
--- a/runtime/helpers.js
+++ b/runtime/helpers.js
@@ -252,7 +252,7 @@ module.exports = {
     },
 
     /**
-     * Merges
+     * Merges object properties
      * @param  {[type]} object [description]
      * @param  {[type]} source [description]
      * @return {[type]}        [description]
@@ -264,5 +264,24 @@ module.exports = {
             }
         }
         return into;
+    },
+
+    /**
+     * classList(a, b, c, ...)
+     * Joines a list of class names with spaces. Empty class names are omitted.
+     *
+     * classList('a', undefined, 'b') --> 'a b'
+     *
+     */
+    cl: function() {
+        var args = arguments;
+        var classNames = [];
+        for (var i=0, len=args.length; i<len; i++) {
+            var cur = args[i];
+            if (cur) {
+                classNames.push(cur);
+            }
+        }
+        return classNames.join(' ');
     }
 };
diff --git a/test/fixtures/render/autotest/shorthand-class-merge/expected.html b/test/fixtures/render/autotest/shorthand-class-merge/expected.html
new file mode 100644
index 000000000..4b1d8f3d5
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-class-merge/expected.html
@@ -0,0 +1 @@
+<div class="foo bar"></div>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-class-merge/template.marko b/test/fixtures/render/autotest/shorthand-class-merge/template.marko
new file mode 100644
index 000000000..24021e46b
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-class-merge/template.marko
@@ -0,0 +1 @@
+div.foo class="bar"
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-class-merge/test.js b/test/fixtures/render/autotest/shorthand-class-merge/test.js
new file mode 100644
index 000000000..0266cde02
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-class-merge/test.js
@@ -0,0 +1,3 @@
+exports.templateData = {
+    name: 'Frank'
+};
diff --git a/test/fixtures/render/autotest/shorthand-class-merge2/expected.html b/test/fixtures/render/autotest/shorthand-class-merge2/expected.html
new file mode 100644
index 000000000..e78093ca7
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-class-merge2/expected.html
@@ -0,0 +1 @@
+<div class="foo baz"></div>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-class-merge2/template.marko b/test/fixtures/render/autotest/shorthand-class-merge2/template.marko
new file mode 100644
index 000000000..0d9142c65
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-class-merge2/template.marko
@@ -0,0 +1 @@
+div.foo.${data.missing} class="baz"
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-class-merge2/test.js b/test/fixtures/render/autotest/shorthand-class-merge2/test.js
new file mode 100644
index 000000000..0266cde02
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-class-merge2/test.js
@@ -0,0 +1,3 @@
+exports.templateData = {
+    name: 'Frank'
+};
diff --git a/test/fixtures/render/autotest/shorthand-div-id-dynamic/expected.html b/test/fixtures/render/autotest/shorthand-div-id-dynamic/expected.html
new file mode 100644
index 000000000..da125c09e
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div-id-dynamic/expected.html
@@ -0,0 +1 @@
+<div style="color: red;" id="foo-Frank">Hello Frank!</div>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-div-id-dynamic/template.marko b/test/fixtures/render/autotest/shorthand-div-id-dynamic/template.marko
new file mode 100644
index 000000000..4feaf2c68
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div-id-dynamic/template.marko
@@ -0,0 +1,2 @@
+div#foo-${data.name} style="color: red;"
+    - Hello ${data.name}!
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-div-id-dynamic/test.js b/test/fixtures/render/autotest/shorthand-div-id-dynamic/test.js
new file mode 100644
index 000000000..0266cde02
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div-id-dynamic/test.js
@@ -0,0 +1,3 @@
+exports.templateData = {
+    name: 'Frank'
+};
diff --git a/test/fixtures/render/autotest/shorthand-div-id/expected.html b/test/fixtures/render/autotest/shorthand-div-id/expected.html
new file mode 100644
index 000000000..0a5e17ab3
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div-id/expected.html
@@ -0,0 +1 @@
+<div style="color: red;" id="foo">Hello Frank!</div>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-div-id/template.marko b/test/fixtures/render/autotest/shorthand-div-id/template.marko
new file mode 100644
index 000000000..6362b3846
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div-id/template.marko
@@ -0,0 +1,2 @@
+div#foo style="color: red;"
+    - Hello ${data.name}!
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-div-id/test.js b/test/fixtures/render/autotest/shorthand-div-id/test.js
new file mode 100644
index 000000000..0266cde02
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div-id/test.js
@@ -0,0 +1,3 @@
+exports.templateData = {
+    name: 'Frank'
+};
diff --git a/test/fixtures/render/autotest/shorthand-div.foo/expected.html b/test/fixtures/render/autotest/shorthand-div.foo/expected.html
new file mode 100644
index 000000000..dc957e185
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div.foo/expected.html
@@ -0,0 +1 @@
+<div style="color: red;" class="foo">Hello Frank!</div>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-div.foo/template.marko b/test/fixtures/render/autotest/shorthand-div.foo/template.marko
new file mode 100644
index 000000000..b2f580999
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div.foo/template.marko
@@ -0,0 +1,2 @@
+div.foo style="color: red;"
+    - Hello ${data.name}!
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-div.foo/test.js b/test/fixtures/render/autotest/shorthand-div.foo/test.js
new file mode 100644
index 000000000..0266cde02
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-div.foo/test.js
@@ -0,0 +1,3 @@
+exports.templateData = {
+    name: 'Frank'
+};
diff --git a/test/fixtures/render/autotest/shorthand-id-and-classes/expected.html b/test/fixtures/render/autotest/shorthand-id-and-classes/expected.html
new file mode 100644
index 000000000..8c3837e9f
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-id-and-classes/expected.html
@@ -0,0 +1 @@
+<div class="bar baz" id="foo"></div>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-id-and-classes/template.marko b/test/fixtures/render/autotest/shorthand-id-and-classes/template.marko
new file mode 100644
index 000000000..742450b2c
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-id-and-classes/template.marko
@@ -0,0 +1 @@
+#foo.bar.baz
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-id-and-classes/test.js b/test/fixtures/render/autotest/shorthand-id-and-classes/test.js
new file mode 100644
index 000000000..0266cde02
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-id-and-classes/test.js
@@ -0,0 +1,3 @@
+exports.templateData = {
+    name: 'Frank'
+};
diff --git a/test/fixtures/render/autotest/shorthand-verbose/expected.html b/test/fixtures/render/autotest/shorthand-verbose/expected.html
new file mode 100644
index 000000000..f14d81db1
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-verbose/expected.html
@@ -0,0 +1 @@
+<div class="bar baz" id="foo">Hello Frank!</div>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-verbose/template.marko b/test/fixtures/render/autotest/shorthand-verbose/template.marko
new file mode 100644
index 000000000..1bffc930b
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-verbose/template.marko
@@ -0,0 +1,3 @@
+<#foo.bar.baz>
+    Hello ${data.name}!
+</>
\ No newline at end of file
diff --git a/test/fixtures/render/autotest/shorthand-verbose/test.js b/test/fixtures/render/autotest/shorthand-verbose/test.js
new file mode 100644
index 000000000..0266cde02
--- /dev/null
+++ b/test/fixtures/render/autotest/shorthand-verbose/test.js
@@ -0,0 +1,3 @@
+exports.templateData = {
+    name: 'Frank'
+};