diff --git a/bower.json b/bower.json
index c280181ee..dff7866c5 100755
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "jsstyles",
   "description": "Composable and reusable style sheets.",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "author": {
     "name": "Oleg Slobodskoi",
     "email": "oleg008@gmail.com"
diff --git a/dist/jss.js b/dist/jss.js
index 2acd097f8..f2250b2b6 100755
--- a/dist/jss.js
+++ b/dist/jss.js
@@ -106,13 +106,14 @@ PluginsRegistry.prototype.run = function (rule) {
 
 var uid = require('./uid')
 var clone = require('./clone')
+var defaults = require('./defaults')
 
 var toString = Object.prototype.toString
 
 /**
  * Rule is selector + style hash.
  *
- * @param {String} [selector]
+ * @param {String} [selector] can be selector, rule name, @media etc.
  * @param {Object} [style] declarations block
  * @param {Object} [options]
  * @api public
@@ -121,14 +122,17 @@ function Rule(selector, style, options) {
     this.id = uid.get()
     this.options = options || {}
     if (this.options.named == null) this.options.named = true
+    this.isAtRule = (selector || '')[0] == '@'
 
-    if (selector) {
-        this.selector = selector
-        this.isAtRule = selector[0] == '@'
+    if (this.options.named) {
+        if (this.isAtRule) {
+            this.selector = selector
+        } else {
+            this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
+            this.selector = '.' + this.className
+        }
     } else {
-        this.isAtRule = false
-        this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
-        this.selector = '.' + this.className
+        this.selector = selector
     }
 
     // We expect style to be plain object.
@@ -137,9 +141,9 @@ function Rule(selector, style, options) {
     // Will be set by StyleSheet#link if link option is true.
     this.CSSRule = null
     // When at-rule has sub rules.
-    this.rules = null
+    this.subrules = null
     this.jss = this.options.jss
-    this.extractAtRules()
+    this.extractSubrules()
 }
 
 module.exports = Rule
@@ -217,16 +221,26 @@ Rule.prototype.addChild = function (selector, style, options) {
  * @return {Rule}
  * @api private
  */
-Rule.prototype.extractAtRules = function () {
+Rule.prototype.extractSubrules = function () {
     if (!this.isAtRule || !this.style) return
-    if (!this.rules) this.rules = {}
-
+    if (!this.subrules) this.subrules = {}
+    var sheet = this.options.sheet
     for (var name in this.style) {
+        var options = this.options
         var style = this.style[name]
         // Not a nested rule.
         if (typeof style == 'string') break
-        var selector = this.options.named ? undefined : name
-        this.rules[name] = this.jss.createRule(selector, style, this.options)
+        var selector
+        // We are going to overwrite some rule within the same sheet when
+        // @media query matches conditions.
+        if (options.named) {
+            var prevRule = sheet && sheet.rules[name]
+            if (prevRule) {
+                selector = prevRule.selector
+                options = defaults({named: false}, options)
+            }
+        } else selector = name
+        this.subrules[name] = this.jss.createRule(selector, style, options)
         delete this.style[name]
     }
 }
@@ -263,7 +277,7 @@ Rule.prototype.toString = function (options) {
     var style = this.style
 
     // At rules like @charset
-    if (this.isAtRule && !this.style && !this.rules) return this.selector + ';'
+    if (this.isAtRule && !this.style && !this.subrules) return this.selector + ';'
 
     if (!options) options = {}
     if (options.indentationLevel == null) options.indentationLevel = 0
@@ -282,13 +296,14 @@ Rule.prototype.toString = function (options) {
         }
     }
 
-    // We are have an at-rule with nested statements.
+    // We have an at-rule with nested statements.
     // https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
-    for (var name in this.rules) {
-        var ruleStr = this.rules[name].toString({
-            indentationLevel: options.indentationLevel + 1
-        })
-        str += '\n' + indent(options.indentationLevel, ruleStr)
+    var toStringOptions = {indentationLevel: options.indentationLevel + 1}
+    for (var name in this.subrules) {
+        str += '\n' + indent(
+            options.indentationLevel,
+            this.subrules[name].toString(toStringOptions)
+        )
     }
 
     str += '\n' + indent(options.indentationLevel, '}')
@@ -320,6 +335,8 @@ Rule.prototype.toJSON = function () {
 /**
  * Indent a string.
  *
+ * http://jsperf.com/array-join-vs-for
+ *
  * @param {Number} level
  * @param {String} str
  * @return {String}
@@ -330,7 +347,7 @@ function indent(level, str) {
     return indentStr + str
 }
 
-},{"./clone":5,"./uid":7}],4:[function(require,module,exports){
+},{"./clone":5,"./defaults":6,"./uid":8}],4:[function(require,module,exports){
 'use strict'
 
 var Rule = require('./Rule')
@@ -492,7 +509,7 @@ StyleSheet.prototype.addRule = function (key, style) {
  */
 StyleSheet.prototype.addRules = function (rules) {
     var added = []
-    
+
     for (var key in rules) {
         added.push.apply(added, this.addRule(key, rules[key]))
     }
@@ -545,27 +562,21 @@ StyleSheet.prototype.toString = function () {
  */
 StyleSheet.prototype.createRules = function (key, style, options) {
     var rules = []
-    var selector, name
-
     if (!options) options = {}
     var named = this.options.named
     // Scope options overwrite instance options.
     if (options.named != null) named = options.named
 
-    if (named) name = key
-    else selector = key
-
-    var rule = this.jss.createRule(selector, style, {
+    var rule = this.jss.createRule(key, style, {
         sheet: this,
-        named: named,
-        name: name
+        named: named
     })
     rules.push(rule)
 
     this.rules[rule.selector] = rule
-    if (name) {
-        this.rules[name] = rule
-        this.classes[name] = rule.className
+    if (named) {
+        this.rules[key] = rule
+        this.classes[key] = rule.className
     }
 
     for (key in rule.children) {
@@ -602,8 +613,8 @@ var stringify = JSON.stringify
 var parse = JSON.parse
 
 /**
- * Deeply clone object over serialization.
- * Expects object to be without cyclic dependencies.
+ * Deeply clone object using serialization.
+ * Expects object to be plain and without cyclic dependencies.
  *
  * http://jsperf.com/lodash-deepclone-vs-jquery-extend-deep/6
  *
@@ -616,6 +627,25 @@ module.exports = function clone(obj) {
 },{}],6:[function(require,module,exports){
 'use strict'
 
+/**
+ * Merges second object with first one only if value is undefined.
+ * It expects both objects to be plain.
+ *
+ * @param {Object} obj1
+ * @param {Object} obj2
+ * @return {Object} obj1
+ */
+module.exports = function(obj1, obj2) {
+    for (var key in obj2) {
+        if (obj1[key] === undefined) obj1[key] = obj2[key]
+    }
+    return obj1
+}
+
+
+},{}],7:[function(require,module,exports){
+'use strict'
+
 /**
  * StyleSheets written in javascript.
  *
@@ -635,7 +665,7 @@ exports.StyleSheet = StyleSheet
 exports.Rule = Rule
 exports.Jss = Jss
 exports.uid = uid
-},{"./Jss":1,"./Rule":3,"./StyleSheet":4,"./uid":7}],7:[function(require,module,exports){
+},{"./Jss":1,"./Rule":3,"./StyleSheet":4,"./uid":8}],8:[function(require,module,exports){
 (function (global){
 'use strict'
 
@@ -668,5 +698,5 @@ exports.reset = function() {
 }
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}]},{},[6])(6)
+},{}]},{},[7])(7)
 });
\ No newline at end of file
diff --git a/dist/jss.min.js b/dist/jss.min.js
index 4c06f817f..b2c12bcc1 100755
--- a/dist/jss.min.js
+++ b/dist/jss.min.js
@@ -1,8 +1,8 @@
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.jss=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";var StyleSheet=require("./StyleSheet");var Rule=require("./Rule");var PluginsRegistry=require("./PluginsRegistry");function Jss(){this.plugins=new PluginsRegistry}module.exports=Jss;Jss.prototype.create=function(){return new Jss};Jss.prototype.createStyleSheet=function(rules,options){if(!options)options={};options.jss=this;var sheet=new StyleSheet(rules,options);return sheet};Jss.prototype.createRule=function(selector,style,options){if(typeof selector=="object"){options=style;style=selector;selector=null}if(!options)options={};options.jss=this;var rule=new Rule(selector,style,options);this.plugins.run(rule);return rule};Jss.prototype.use=function(fn){this.plugins.use(fn);return this}},{"./PluginsRegistry":2,"./Rule":3,"./StyleSheet":4}],2:[function(require,module,exports){"use strict";function PluginsRegistry(){this.registry=[]}module.exports=PluginsRegistry;PluginsRegistry.prototype.use=function(fn){this.registry.push(fn)};PluginsRegistry.prototype.run=function(rule){for(var i=0;i<this.registry.length;i++){this.registry[i](rule)}}},{}],3:[function(require,module,exports){"use strict";var uid=require("./uid");var clone=require("./clone");var toString=Object.prototype.toString;function Rule(selector,style,options){this.id=uid.get();this.options=options||{};if(this.options.named==null)this.options.named=true;if(selector){this.selector=selector;this.isAtRule=selector[0]=="@"}else{this.isAtRule=false;this.className=Rule.NAMESPACE_PREFIX+"-"+this.id;this.selector="."+this.className}if(style)this.style=clone(style);this.CSSRule=null;this.rules=null;this.jss=this.options.jss;this.extractAtRules()}module.exports=Rule;Rule.NAMESPACE_PREFIX="jss";Rule.INDENTATION="  ";Rule.prototype.prop=function(name,value){if(value!=null){if(!this.style)this.style={};this.style[name]=value;if(this.CSSRule)this.CSSRule.style[name]=value;return this}if(this.style)value=this.style[name];if(value==null&&this.CSSRule){value=this.CSSRule.style[name];this.style[name]=value}return value};Rule.prototype.addChild=function(selector,style,options){if(!this.children)this.children={};this.children[selector]={style:style,options:options};return this};Rule.prototype.extractAtRules=function(){if(!this.isAtRule||!this.style)return;if(!this.rules)this.rules={};for(var name in this.style){var style=this.style[name];if(typeof style=="string")break;var selector=this.options.named?undefined:name;this.rules[name]=this.jss.createRule(selector,style,this.options);delete this.style[name]}};Rule.prototype.applyTo=function(element){for(var prop in this.style){var value=this.style[prop];if(toString.call(value)=="[object Array]"){for(var i=0;i<value.length;i++){element.style[prop]=value[i]}}else{element.style[prop]=value}}return this};Rule.prototype.toString=function(options){var style=this.style;if(this.isAtRule&&!this.style&&!this.rules)return this.selector+";";if(!options)options={};if(options.indentationLevel==null)options.indentationLevel=0;var str=indent(options.indentationLevel,this.selector+" {");for(var prop in style){var value=style[prop];if(toString.call(value)=="[object Array]"){for(var i=0;i<value.length;i++){str+="\n"+indent(options.indentationLevel+1,prop+": "+value[i]+";")}}else{str+="\n"+indent(options.indentationLevel+1,prop+": "+value+";")}}for(var name in this.rules){var ruleStr=this.rules[name].toString({indentationLevel:options.indentationLevel+1});str+="\n"+indent(options.indentationLevel,ruleStr)}str+="\n"+indent(options.indentationLevel,"}");return str};Rule.prototype.toJSON=function(){var style={};for(var prop in this.style){var value=this.style[prop];var type=typeof value;if(type=="string"||type=="number"){style[prop]=value}}return style};function indent(level,str){var indentStr="";for(var i=0;i<level;i++)indentStr+=Rule.INDENTATION;return indentStr+str}},{"./clone":5,"./uid":7}],4:[function(require,module,exports){"use strict";var Rule=require("./Rule");function StyleSheet(rules,options){this.options=options||{};if(this.options.named==null)this.options.named=true;this.element=null;this.attached=false;this.media=this.options.media;this.type=this.options.type;this.title=this.options.title;this.rules={};this.classes={};this.deployed=false;this.linked=false;this.jss=this.options.jss;if(typeof document!="undefined"){this.element=this.createElement()}for(var key in rules){this.createRules(key,rules[key])}}StyleSheet.ATTRIBUTES=["title","type","media"];module.exports=StyleSheet;StyleSheet.prototype.attach=function(){if(this.attached)return this;if(!this.deployed){this.deploy();this.deployed=true}document.head.appendChild(this.element);if(!this.linked&&this.options.link){this.link();this.linked=true}this.attached=true;return this};StyleSheet.prototype.detach=function(){if(!this.attached)return this;this.element.parentNode.removeChild(this.element);this.attached=false;return this};StyleSheet.prototype.deploy=function(){this.element.innerHTML="\n"+this.toString()+"\n";return this};StyleSheet.prototype.link=function(){var CSSRuleList=this.element.sheet.cssRules;var rules=this.rules;for(var i=0;i<CSSRuleList.length;i++){var CSSRule=CSSRuleList[i];var rule=rules[CSSRule.selectorText];if(rule)rule.CSSRule=CSSRule}return this};StyleSheet.prototype.addRule=function(key,style){var rules=this.createRules(key,style);if(this.deployed){var sheet=this.element.sheet;for(var i=0;i<rules.length;i++){var nextIndex=sheet.cssRules.length;var rule=rules[i];sheet.insertRule(rule.toString(),nextIndex);if(this.options.link)rule.CSSRule=sheet.cssRules[nextIndex]}}else{this.deploy()}return rules};StyleSheet.prototype.addRules=function(rules){var added=[];for(var key in rules){added.push.apply(added,this.addRule(key,rules[key]))}return added};StyleSheet.prototype.getRule=function(key){return this.rules[key]};StyleSheet.prototype.toString=function(){var str="";var rules=this.rules;var stringified={};for(var key in rules){var rule=rules[key];if(stringified[rule.id])continue;if(str)str+="\n";str+=rules[key].toString();stringified[rule.id]=true}return str};StyleSheet.prototype.createRules=function(key,style,options){var rules=[];var selector,name;if(!options)options={};var named=this.options.named;if(options.named!=null)named=options.named;if(named)name=key;else selector=key;var rule=this.jss.createRule(selector,style,{sheet:this,named:named,name:name});rules.push(rule);this.rules[rule.selector]=rule;if(name){this.rules[name]=rule;this.classes[name]=rule.className}for(key in rule.children){rules.push(this.createRules(key,rule.children[key].style,rule.children[key].options))}return rules};StyleSheet.prototype.createElement=function(){var element=document.createElement("style");StyleSheet.ATTRIBUTES.forEach(function(name){if(this[name])element.setAttribute(name,this[name])},this);return element}},{"./Rule":3}],5:[function(require,module,exports){"use strict";var stringify=JSON.stringify;var parse=JSON.parse;module.exports=function clone(obj){return parse(stringify(obj))}},{}],6:[function(require,module,exports){"use strict";/**
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.jss=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";var StyleSheet=require("./StyleSheet");var Rule=require("./Rule");var PluginsRegistry=require("./PluginsRegistry");function Jss(){this.plugins=new PluginsRegistry}module.exports=Jss;Jss.prototype.create=function(){return new Jss};Jss.prototype.createStyleSheet=function(rules,options){if(!options)options={};options.jss=this;var sheet=new StyleSheet(rules,options);return sheet};Jss.prototype.createRule=function(selector,style,options){if(typeof selector=="object"){options=style;style=selector;selector=null}if(!options)options={};options.jss=this;var rule=new Rule(selector,style,options);this.plugins.run(rule);return rule};Jss.prototype.use=function(fn){this.plugins.use(fn);return this}},{"./PluginsRegistry":2,"./Rule":3,"./StyleSheet":4}],2:[function(require,module,exports){"use strict";function PluginsRegistry(){this.registry=[]}module.exports=PluginsRegistry;PluginsRegistry.prototype.use=function(fn){this.registry.push(fn)};PluginsRegistry.prototype.run=function(rule){for(var i=0;i<this.registry.length;i++){this.registry[i](rule)}}},{}],3:[function(require,module,exports){"use strict";var uid=require("./uid");var clone=require("./clone");var defaults=require("./defaults");var toString=Object.prototype.toString;function Rule(selector,style,options){this.id=uid.get();this.options=options||{};if(this.options.named==null)this.options.named=true;this.isAtRule=(selector||"")[0]=="@";if(this.options.named){if(this.isAtRule){this.selector=selector}else{this.className=Rule.NAMESPACE_PREFIX+"-"+this.id;this.selector="."+this.className}}else{this.selector=selector}if(style)this.style=clone(style);this.CSSRule=null;this.subrules=null;this.jss=this.options.jss;this.extractSubrules()}module.exports=Rule;Rule.NAMESPACE_PREFIX="jss";Rule.INDENTATION="  ";Rule.prototype.prop=function(name,value){if(value!=null){if(!this.style)this.style={};this.style[name]=value;if(this.CSSRule)this.CSSRule.style[name]=value;return this}if(this.style)value=this.style[name];if(value==null&&this.CSSRule){value=this.CSSRule.style[name];this.style[name]=value}return value};Rule.prototype.addChild=function(selector,style,options){if(!this.children)this.children={};this.children[selector]={style:style,options:options};return this};Rule.prototype.extractSubrules=function(){if(!this.isAtRule||!this.style)return;if(!this.subrules)this.subrules={};var sheet=this.options.sheet;for(var name in this.style){var options=this.options;var style=this.style[name];if(typeof style=="string")break;var selector;if(options.named){var prevRule=sheet&&sheet.rules[name];if(prevRule){selector=prevRule.selector;options=defaults({named:false},options)}}else selector=name;this.subrules[name]=this.jss.createRule(selector,style,options);delete this.style[name]}};Rule.prototype.applyTo=function(element){for(var prop in this.style){var value=this.style[prop];if(toString.call(value)=="[object Array]"){for(var i=0;i<value.length;i++){element.style[prop]=value[i]}}else{element.style[prop]=value}}return this};Rule.prototype.toString=function(options){var style=this.style;if(this.isAtRule&&!this.style&&!this.subrules)return this.selector+";";if(!options)options={};if(options.indentationLevel==null)options.indentationLevel=0;var str=indent(options.indentationLevel,this.selector+" {");for(var prop in style){var value=style[prop];if(toString.call(value)=="[object Array]"){for(var i=0;i<value.length;i++){str+="\n"+indent(options.indentationLevel+1,prop+": "+value[i]+";")}}else{str+="\n"+indent(options.indentationLevel+1,prop+": "+value+";")}}var toStringOptions={indentationLevel:options.indentationLevel+1};for(var name in this.subrules){str+="\n"+indent(options.indentationLevel,this.subrules[name].toString(toStringOptions))}str+="\n"+indent(options.indentationLevel,"}");return str};Rule.prototype.toJSON=function(){var style={};for(var prop in this.style){var value=this.style[prop];var type=typeof value;if(type=="string"||type=="number"){style[prop]=value}}return style};function indent(level,str){var indentStr="";for(var i=0;i<level;i++)indentStr+=Rule.INDENTATION;return indentStr+str}},{"./clone":5,"./defaults":6,"./uid":8}],4:[function(require,module,exports){"use strict";var Rule=require("./Rule");function StyleSheet(rules,options){this.options=options||{};if(this.options.named==null)this.options.named=true;this.element=null;this.attached=false;this.media=this.options.media;this.type=this.options.type;this.title=this.options.title;this.rules={};this.classes={};this.deployed=false;this.linked=false;this.jss=this.options.jss;if(typeof document!="undefined"){this.element=this.createElement()}for(var key in rules){this.createRules(key,rules[key])}}StyleSheet.ATTRIBUTES=["title","type","media"];module.exports=StyleSheet;StyleSheet.prototype.attach=function(){if(this.attached)return this;if(!this.deployed){this.deploy();this.deployed=true}document.head.appendChild(this.element);if(!this.linked&&this.options.link){this.link();this.linked=true}this.attached=true;return this};StyleSheet.prototype.detach=function(){if(!this.attached)return this;this.element.parentNode.removeChild(this.element);this.attached=false;return this};StyleSheet.prototype.deploy=function(){this.element.innerHTML="\n"+this.toString()+"\n";return this};StyleSheet.prototype.link=function(){var CSSRuleList=this.element.sheet.cssRules;var rules=this.rules;for(var i=0;i<CSSRuleList.length;i++){var CSSRule=CSSRuleList[i];var rule=rules[CSSRule.selectorText];if(rule)rule.CSSRule=CSSRule}return this};StyleSheet.prototype.addRule=function(key,style){var rules=this.createRules(key,style);if(this.deployed){var sheet=this.element.sheet;for(var i=0;i<rules.length;i++){var nextIndex=sheet.cssRules.length;var rule=rules[i];sheet.insertRule(rule.toString(),nextIndex);if(this.options.link)rule.CSSRule=sheet.cssRules[nextIndex]}}else{this.deploy()}return rules};StyleSheet.prototype.addRules=function(rules){var added=[];for(var key in rules){added.push.apply(added,this.addRule(key,rules[key]))}return added};StyleSheet.prototype.getRule=function(key){return this.rules[key]};StyleSheet.prototype.toString=function(){var str="";var rules=this.rules;var stringified={};for(var key in rules){var rule=rules[key];if(stringified[rule.id])continue;if(str)str+="\n";str+=rules[key].toString();stringified[rule.id]=true}return str};StyleSheet.prototype.createRules=function(key,style,options){var rules=[];if(!options)options={};var named=this.options.named;if(options.named!=null)named=options.named;var rule=this.jss.createRule(key,style,{sheet:this,named:named});rules.push(rule);this.rules[rule.selector]=rule;if(named){this.rules[key]=rule;this.classes[key]=rule.className}for(key in rule.children){rules.push(this.createRules(key,rule.children[key].style,rule.children[key].options))}return rules};StyleSheet.prototype.createElement=function(){var element=document.createElement("style");StyleSheet.ATTRIBUTES.forEach(function(name){if(this[name])element.setAttribute(name,this[name])},this);return element}},{"./Rule":3}],5:[function(require,module,exports){"use strict";var stringify=JSON.stringify;var parse=JSON.parse;module.exports=function clone(obj){return parse(stringify(obj))}},{}],6:[function(require,module,exports){"use strict";module.exports=function(obj1,obj2){for(var key in obj2){if(obj1[key]===undefined)obj1[key]=obj2[key]}return obj1}},{}],7:[function(require,module,exports){"use strict";/**
  * StyleSheets written in javascript.
  *
  * @copyright Oleg Slobodskoi 2015
  * @website https://github.com/jsstyles/jss
  * @license MIT
  */
-var StyleSheet=require("./StyleSheet");var Rule=require("./Rule");var Jss=require("./Jss");var uid=require("./uid");module.exports=exports=new Jss;exports.StyleSheet=StyleSheet;exports.Rule=Rule;exports.Jss=Jss;exports.uid=uid},{"./Jss":1,"./Rule":3,"./StyleSheet":4,"./uid":7}],7:[function(require,module,exports){(function(global){"use strict";var globalReference=typeof window==="undefined"?global:window;var namespace="__JSS_UID_PREFIX__";if(globalReference[namespace]==null)globalReference[namespace]=0;var prefix=globalReference[namespace]++;var counter=0;exports.get=function(){return prefix+"-"+counter++};exports.reset=function(){counter=0}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}]},{},[6])(6)});
\ No newline at end of file
+var StyleSheet=require("./StyleSheet");var Rule=require("./Rule");var Jss=require("./Jss");var uid=require("./uid");module.exports=exports=new Jss;exports.StyleSheet=StyleSheet;exports.Rule=Rule;exports.Jss=Jss;exports.uid=uid},{"./Jss":1,"./Rule":3,"./StyleSheet":4,"./uid":8}],8:[function(require,module,exports){(function(global){"use strict";var globalReference=typeof window==="undefined"?global:window;var namespace="__JSS_UID_PREFIX__";if(globalReference[namespace]==null)globalReference[namespace]=0;var prefix=globalReference[namespace]++;var counter=0;exports.get=function(){return prefix+"-"+counter++};exports.reset=function(){counter=0}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}]},{},[7])(7)});
\ No newline at end of file
diff --git a/examples/calendar/dist/index.js b/examples/calendar/dist/index.js
index 943c44444..f8e9e9561 100644
--- a/examples/calendar/dist/index.js
+++ b/examples/calendar/dist/index.js
@@ -476,7 +476,7 @@ EventsManager.prototype.render = function () {
 
 module.exports = require('../../../lib')
 
-},{"../../../lib":22}],12:[function(require,module,exports){
+},{"../../../lib":23}],12:[function(require,module,exports){
 'use strict'
 
 var jss = require('../jss')
@@ -788,13 +788,14 @@ PluginsRegistry.prototype.run = function (rule) {
 
 var uid = require('./uid')
 var clone = require('./clone')
+var defaults = require('./defaults')
 
 var toString = Object.prototype.toString
 
 /**
  * Rule is selector + style hash.
  *
- * @param {String} [selector]
+ * @param {String} [selector] can be selector, rule name, @media etc.
  * @param {Object} [style] declarations block
  * @param {Object} [options]
  * @api public
@@ -803,14 +804,17 @@ function Rule(selector, style, options) {
     this.id = uid.get()
     this.options = options || {}
     if (this.options.named == null) this.options.named = true
+    this.isAtRule = (selector || '')[0] == '@'
 
-    if (selector) {
-        this.selector = selector
-        this.isAtRule = selector[0] == '@'
+    if (this.options.named) {
+        if (this.isAtRule) {
+            this.selector = selector
+        } else {
+            this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
+            this.selector = '.' + this.className
+        }
     } else {
-        this.isAtRule = false
-        this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
-        this.selector = '.' + this.className
+        this.selector = selector
     }
 
     // We expect style to be plain object.
@@ -819,9 +823,9 @@ function Rule(selector, style, options) {
     // Will be set by StyleSheet#link if link option is true.
     this.CSSRule = null
     // When at-rule has sub rules.
-    this.rules = null
+    this.subrules = null
     this.jss = this.options.jss
-    this.extractAtRules()
+    this.extractSubrules()
 }
 
 module.exports = Rule
@@ -899,16 +903,26 @@ Rule.prototype.addChild = function (selector, style, options) {
  * @return {Rule}
  * @api private
  */
-Rule.prototype.extractAtRules = function () {
+Rule.prototype.extractSubrules = function () {
     if (!this.isAtRule || !this.style) return
-    if (!this.rules) this.rules = {}
-
+    if (!this.subrules) this.subrules = {}
+    var sheet = this.options.sheet
     for (var name in this.style) {
+        var options = this.options
         var style = this.style[name]
         // Not a nested rule.
         if (typeof style == 'string') break
-        var selector = this.options.named ? undefined : name
-        this.rules[name] = this.jss.createRule(selector, style, this.options)
+        var selector
+        // We are going to overwrite some rule within the same sheet when
+        // @media query matches conditions.
+        if (options.named) {
+            var prevRule = sheet && sheet.rules[name]
+            if (prevRule) {
+                selector = prevRule.selector
+                options = defaults({named: false}, options)
+            }
+        } else selector = name
+        this.subrules[name] = this.jss.createRule(selector, style, options)
         delete this.style[name]
     }
 }
@@ -945,7 +959,7 @@ Rule.prototype.toString = function (options) {
     var style = this.style
 
     // At rules like @charset
-    if (this.isAtRule && !this.style && !this.rules) return this.selector + ';'
+    if (this.isAtRule && !this.style && !this.subrules) return this.selector + ';'
 
     if (!options) options = {}
     if (options.indentationLevel == null) options.indentationLevel = 0
@@ -964,13 +978,14 @@ Rule.prototype.toString = function (options) {
         }
     }
 
-    // We are have an at-rule with nested statements.
+    // We have an at-rule with nested statements.
     // https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
-    for (var name in this.rules) {
-        var ruleStr = this.rules[name].toString({
-            indentationLevel: options.indentationLevel + 1
-        })
-        str += '\n' + indent(options.indentationLevel, ruleStr)
+    var toStringOptions = {indentationLevel: options.indentationLevel + 1}
+    for (var name in this.subrules) {
+        str += '\n' + indent(
+            options.indentationLevel,
+            this.subrules[name].toString(toStringOptions)
+        )
     }
 
     str += '\n' + indent(options.indentationLevel, '}')
@@ -1002,6 +1017,8 @@ Rule.prototype.toJSON = function () {
 /**
  * Indent a string.
  *
+ * http://jsperf.com/array-join-vs-for
+ *
  * @param {Number} level
  * @param {String} str
  * @return {String}
@@ -1012,7 +1029,7 @@ function indent(level, str) {
     return indentStr + str
 }
 
-},{"./clone":21,"./uid":23}],20:[function(require,module,exports){
+},{"./clone":21,"./defaults":22,"./uid":24}],20:[function(require,module,exports){
 'use strict'
 
 var Rule = require('./Rule')
@@ -1174,7 +1191,7 @@ StyleSheet.prototype.addRule = function (key, style) {
  */
 StyleSheet.prototype.addRules = function (rules) {
     var added = []
-    
+
     for (var key in rules) {
         added.push.apply(added, this.addRule(key, rules[key]))
     }
@@ -1227,27 +1244,21 @@ StyleSheet.prototype.toString = function () {
  */
 StyleSheet.prototype.createRules = function (key, style, options) {
     var rules = []
-    var selector, name
-
     if (!options) options = {}
     var named = this.options.named
     // Scope options overwrite instance options.
     if (options.named != null) named = options.named
 
-    if (named) name = key
-    else selector = key
-
-    var rule = this.jss.createRule(selector, style, {
+    var rule = this.jss.createRule(key, style, {
         sheet: this,
-        named: named,
-        name: name
+        named: named
     })
     rules.push(rule)
 
     this.rules[rule.selector] = rule
-    if (name) {
-        this.rules[name] = rule
-        this.classes[name] = rule.className
+    if (named) {
+        this.rules[key] = rule
+        this.classes[key] = rule.className
     }
 
     for (key in rule.children) {
@@ -1284,8 +1295,8 @@ var stringify = JSON.stringify
 var parse = JSON.parse
 
 /**
- * Deeply clone object over serialization.
- * Expects object to be without cyclic dependencies.
+ * Deeply clone object using serialization.
+ * Expects object to be plain and without cyclic dependencies.
  *
  * http://jsperf.com/lodash-deepclone-vs-jquery-extend-deep/6
  *
@@ -1298,6 +1309,25 @@ module.exports = function clone(obj) {
 },{}],22:[function(require,module,exports){
 'use strict'
 
+/**
+ * Merges second object with first one only if value is undefined.
+ * It expects both objects to be plain.
+ *
+ * @param {Object} obj1
+ * @param {Object} obj2
+ * @return {Object} obj1
+ */
+module.exports = function(obj1, obj2) {
+    for (var key in obj2) {
+        if (obj1[key] === undefined) obj1[key] = obj2[key]
+    }
+    return obj1
+}
+
+
+},{}],23:[function(require,module,exports){
+'use strict'
+
 /**
  * StyleSheets written in javascript.
  *
@@ -1317,7 +1347,7 @@ exports.StyleSheet = StyleSheet
 exports.Rule = Rule
 exports.Jss = Jss
 exports.uid = uid
-},{"./Jss":17,"./Rule":19,"./StyleSheet":20,"./uid":23}],23:[function(require,module,exports){
+},{"./Jss":17,"./Rule":19,"./StyleSheet":20,"./uid":24}],24:[function(require,module,exports){
 (function (global){
 'use strict'
 
diff --git a/examples/topcoat/build.js b/examples/topcoat/build.js
index 435830203..4661c584d 100644
--- a/examples/topcoat/build.js
+++ b/examples/topcoat/build.js
@@ -19,7 +19,7 @@ function $(selector) {
     })
 }())
 
-},{"../../lib":13,"./normalize":2,"./topcoat-button":4,"./topcoat-button-bar":3}],2:[function(require,module,exports){
+},{"../../lib":14,"./normalize":2,"./topcoat-button":4,"./topcoat-button-bar":3}],2:[function(require,module,exports){
 module.exports = {
   'html': {
     'font-family': 'sans-serif',
@@ -398,13 +398,14 @@ PluginsRegistry.prototype.run = function (rule) {
 
 var uid = require('./uid')
 var clone = require('./clone')
+var defaults = require('./defaults')
 
 var toString = Object.prototype.toString
 
 /**
  * Rule is selector + style hash.
  *
- * @param {String} [selector]
+ * @param {String} [selector] can be selector, rule name, @media etc.
  * @param {Object} [style] declarations block
  * @param {Object} [options]
  * @api public
@@ -413,14 +414,17 @@ function Rule(selector, style, options) {
     this.id = uid.get()
     this.options = options || {}
     if (this.options.named == null) this.options.named = true
+    this.isAtRule = (selector || '')[0] == '@'
 
-    if (selector) {
-        this.selector = selector
-        this.isAtRule = selector[0] == '@'
+    if (this.options.named) {
+        if (this.isAtRule) {
+            this.selector = selector
+        } else {
+            this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
+            this.selector = '.' + this.className
+        }
     } else {
-        this.isAtRule = false
-        this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
-        this.selector = '.' + this.className
+        this.selector = selector
     }
 
     // We expect style to be plain object.
@@ -429,9 +433,9 @@ function Rule(selector, style, options) {
     // Will be set by StyleSheet#link if link option is true.
     this.CSSRule = null
     // When at-rule has sub rules.
-    this.rules = null
+    this.subrules = null
     this.jss = this.options.jss
-    this.extractAtRules()
+    this.extractSubrules()
 }
 
 module.exports = Rule
@@ -509,16 +513,26 @@ Rule.prototype.addChild = function (selector, style, options) {
  * @return {Rule}
  * @api private
  */
-Rule.prototype.extractAtRules = function () {
+Rule.prototype.extractSubrules = function () {
     if (!this.isAtRule || !this.style) return
-    if (!this.rules) this.rules = {}
-
+    if (!this.subrules) this.subrules = {}
+    var sheet = this.options.sheet
     for (var name in this.style) {
+        var options = this.options
         var style = this.style[name]
         // Not a nested rule.
         if (typeof style == 'string') break
-        var selector = this.options.named ? undefined : name
-        this.rules[name] = this.jss.createRule(selector, style, this.options)
+        var selector
+        // We are going to overwrite some rule within the same sheet when
+        // @media query matches conditions.
+        if (options.named) {
+            var prevRule = sheet && sheet.rules[name]
+            if (prevRule) {
+                selector = prevRule.selector
+                options = defaults({named: false}, options)
+            }
+        } else selector = name
+        this.subrules[name] = this.jss.createRule(selector, style, options)
         delete this.style[name]
     }
 }
@@ -555,7 +569,7 @@ Rule.prototype.toString = function (options) {
     var style = this.style
 
     // At rules like @charset
-    if (this.isAtRule && !this.style && !this.rules) return this.selector + ';'
+    if (this.isAtRule && !this.style && !this.subrules) return this.selector + ';'
 
     if (!options) options = {}
     if (options.indentationLevel == null) options.indentationLevel = 0
@@ -574,13 +588,14 @@ Rule.prototype.toString = function (options) {
         }
     }
 
-    // We are have an at-rule with nested statements.
+    // We have an at-rule with nested statements.
     // https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
-    for (var name in this.rules) {
-        var ruleStr = this.rules[name].toString({
-            indentationLevel: options.indentationLevel + 1
-        })
-        str += '\n' + indent(options.indentationLevel, ruleStr)
+    var toStringOptions = {indentationLevel: options.indentationLevel + 1}
+    for (var name in this.subrules) {
+        str += '\n' + indent(
+            options.indentationLevel,
+            this.subrules[name].toString(toStringOptions)
+        )
     }
 
     str += '\n' + indent(options.indentationLevel, '}')
@@ -612,6 +627,8 @@ Rule.prototype.toJSON = function () {
 /**
  * Indent a string.
  *
+ * http://jsperf.com/array-join-vs-for
+ *
  * @param {Number} level
  * @param {String} str
  * @return {String}
@@ -622,7 +639,7 @@ function indent(level, str) {
     return indentStr + str
 }
 
-},{"./clone":12,"./uid":14}],11:[function(require,module,exports){
+},{"./clone":12,"./defaults":13,"./uid":15}],11:[function(require,module,exports){
 'use strict'
 
 var Rule = require('./Rule')
@@ -784,7 +801,7 @@ StyleSheet.prototype.addRule = function (key, style) {
  */
 StyleSheet.prototype.addRules = function (rules) {
     var added = []
-    
+
     for (var key in rules) {
         added.push.apply(added, this.addRule(key, rules[key]))
     }
@@ -837,27 +854,21 @@ StyleSheet.prototype.toString = function () {
  */
 StyleSheet.prototype.createRules = function (key, style, options) {
     var rules = []
-    var selector, name
-
     if (!options) options = {}
     var named = this.options.named
     // Scope options overwrite instance options.
     if (options.named != null) named = options.named
 
-    if (named) name = key
-    else selector = key
-
-    var rule = this.jss.createRule(selector, style, {
+    var rule = this.jss.createRule(key, style, {
         sheet: this,
-        named: named,
-        name: name
+        named: named
     })
     rules.push(rule)
 
     this.rules[rule.selector] = rule
-    if (name) {
-        this.rules[name] = rule
-        this.classes[name] = rule.className
+    if (named) {
+        this.rules[key] = rule
+        this.classes[key] = rule.className
     }
 
     for (key in rule.children) {
@@ -894,8 +905,8 @@ var stringify = JSON.stringify
 var parse = JSON.parse
 
 /**
- * Deeply clone object over serialization.
- * Expects object to be without cyclic dependencies.
+ * Deeply clone object using serialization.
+ * Expects object to be plain and without cyclic dependencies.
  *
  * http://jsperf.com/lodash-deepclone-vs-jquery-extend-deep/6
  *
@@ -908,6 +919,25 @@ module.exports = function clone(obj) {
 },{}],13:[function(require,module,exports){
 'use strict'
 
+/**
+ * Merges second object with first one only if value is undefined.
+ * It expects both objects to be plain.
+ *
+ * @param {Object} obj1
+ * @param {Object} obj2
+ * @return {Object} obj1
+ */
+module.exports = function(obj1, obj2) {
+    for (var key in obj2) {
+        if (obj1[key] === undefined) obj1[key] = obj2[key]
+    }
+    return obj1
+}
+
+
+},{}],14:[function(require,module,exports){
+'use strict'
+
 /**
  * StyleSheets written in javascript.
  *
@@ -927,7 +957,7 @@ exports.StyleSheet = StyleSheet
 exports.Rule = Rule
 exports.Jss = Jss
 exports.uid = uid
-},{"./Jss":8,"./Rule":10,"./StyleSheet":11,"./uid":14}],14:[function(require,module,exports){
+},{"./Jss":8,"./Rule":10,"./StyleSheet":11,"./uid":15}],15:[function(require,module,exports){
 (function (global){
 'use strict'
 
diff --git a/history.md b/history.md
index d6bdd8b04..6b57fedf2 100755
--- a/history.md
+++ b/history.md
@@ -1,3 +1,7 @@
+## 2.2.0 / 2015-09-6
+
+- added support for named at-rules e.g. @media
+
 ## 2.1.6 / 2015-09-2
 
 - removed invalid characters
diff --git a/lib/Rule.js b/lib/Rule.js
index cb52abfca..0c2c74e69 100755
--- a/lib/Rule.js
+++ b/lib/Rule.js
@@ -2,13 +2,14 @@
 
 var uid = require('./uid')
 var clone = require('./clone')
+var defaults = require('./defaults')
 
 var toString = Object.prototype.toString
 
 /**
  * Rule is selector + style hash.
  *
- * @param {String} [selector]
+ * @param {String} [selector] can be selector, rule name, @media etc.
  * @param {Object} [style] declarations block
  * @param {Object} [options]
  * @api public
@@ -17,14 +18,17 @@ function Rule(selector, style, options) {
     this.id = uid.get()
     this.options = options || {}
     if (this.options.named == null) this.options.named = true
+    this.isAtRule = (selector || '')[0] == '@'
 
-    if (selector) {
-        this.selector = selector
-        this.isAtRule = selector[0] == '@'
+    if (this.options.named) {
+        if (this.isAtRule) {
+            this.selector = selector
+        } else {
+            this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
+            this.selector = '.' + this.className
+        }
     } else {
-        this.isAtRule = false
-        this.className = Rule.NAMESPACE_PREFIX + '-' + this.id
-        this.selector = '.' + this.className
+        this.selector = selector
     }
 
     // We expect style to be plain object.
@@ -33,9 +37,9 @@ function Rule(selector, style, options) {
     // Will be set by StyleSheet#link if link option is true.
     this.CSSRule = null
     // When at-rule has sub rules.
-    this.rules = null
+    this.subrules = null
     this.jss = this.options.jss
-    this.extractAtRules()
+    this.extractSubrules()
 }
 
 module.exports = Rule
@@ -113,16 +117,26 @@ Rule.prototype.addChild = function (selector, style, options) {
  * @return {Rule}
  * @api private
  */
-Rule.prototype.extractAtRules = function () {
+Rule.prototype.extractSubrules = function () {
     if (!this.isAtRule || !this.style) return
-    if (!this.rules) this.rules = {}
-
+    if (!this.subrules) this.subrules = {}
+    var sheet = this.options.sheet
     for (var name in this.style) {
+        var options = this.options
         var style = this.style[name]
         // Not a nested rule.
         if (typeof style == 'string') break
-        var selector = this.options.named ? undefined : name
-        this.rules[name] = this.jss.createRule(selector, style, this.options)
+        var selector
+        // We are going to overwrite some rule within the same sheet when
+        // @media query matches conditions.
+        if (options.named) {
+            var prevRule = sheet && sheet.rules[name]
+            if (prevRule) {
+                selector = prevRule.selector
+                options = defaults({named: false}, options)
+            }
+        } else selector = name
+        this.subrules[name] = this.jss.createRule(selector, style, options)
         delete this.style[name]
     }
 }
@@ -159,7 +173,7 @@ Rule.prototype.toString = function (options) {
     var style = this.style
 
     // At rules like @charset
-    if (this.isAtRule && !this.style && !this.rules) return this.selector + ';'
+    if (this.isAtRule && !this.style && !this.subrules) return this.selector + ';'
 
     if (!options) options = {}
     if (options.indentationLevel == null) options.indentationLevel = 0
@@ -178,13 +192,14 @@ Rule.prototype.toString = function (options) {
         }
     }
 
-    // We are have an at-rule with nested statements.
+    // We have an at-rule with nested statements.
     // https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
-    for (var name in this.rules) {
-        var ruleStr = this.rules[name].toString({
-            indentationLevel: options.indentationLevel + 1
-        })
-        str += '\n' + indent(options.indentationLevel, ruleStr)
+    var toStringOptions = {indentationLevel: options.indentationLevel + 1}
+    for (var name in this.subrules) {
+        str += '\n' + indent(
+            options.indentationLevel,
+            this.subrules[name].toString(toStringOptions)
+        )
     }
 
     str += '\n' + indent(options.indentationLevel, '}')
@@ -216,6 +231,8 @@ Rule.prototype.toJSON = function () {
 /**
  * Indent a string.
  *
+ * http://jsperf.com/array-join-vs-for
+ *
  * @param {Number} level
  * @param {String} str
  * @return {String}
diff --git a/lib/StyleSheet.js b/lib/StyleSheet.js
index 7a2ffb52d..3a1a93b06 100755
--- a/lib/StyleSheet.js
+++ b/lib/StyleSheet.js
@@ -159,7 +159,7 @@ StyleSheet.prototype.addRule = function (key, style) {
  */
 StyleSheet.prototype.addRules = function (rules) {
     var added = []
-    
+
     for (var key in rules) {
         added.push.apply(added, this.addRule(key, rules[key]))
     }
@@ -212,27 +212,21 @@ StyleSheet.prototype.toString = function () {
  */
 StyleSheet.prototype.createRules = function (key, style, options) {
     var rules = []
-    var selector, name
-
     if (!options) options = {}
     var named = this.options.named
     // Scope options overwrite instance options.
     if (options.named != null) named = options.named
 
-    if (named) name = key
-    else selector = key
-
-    var rule = this.jss.createRule(selector, style, {
+    var rule = this.jss.createRule(key, style, {
         sheet: this,
-        named: named,
-        name: name
+        named: named
     })
     rules.push(rule)
 
     this.rules[rule.selector] = rule
-    if (name) {
-        this.rules[name] = rule
-        this.classes[name] = rule.className
+    if (named) {
+        this.rules[key] = rule
+        this.classes[key] = rule.className
     }
 
     for (key in rule.children) {
diff --git a/lib/clone.js b/lib/clone.js
index b205d5676..5217a0418 100644
--- a/lib/clone.js
+++ b/lib/clone.js
@@ -4,8 +4,8 @@ var stringify = JSON.stringify
 var parse = JSON.parse
 
 /**
- * Deeply clone object over serialization.
- * Expects object to be without cyclic dependencies.
+ * Deeply clone object using serialization.
+ * Expects object to be plain and without cyclic dependencies.
  *
  * http://jsperf.com/lodash-deepclone-vs-jquery-extend-deep/6
  *
diff --git a/lib/defaults.js b/lib/defaults.js
new file mode 100644
index 000000000..6deab354f
--- /dev/null
+++ b/lib/defaults.js
@@ -0,0 +1,17 @@
+'use strict'
+
+/**
+ * Merges second object with first one only if value is undefined.
+ * It expects both objects to be plain.
+ *
+ * @param {Object} obj1
+ * @param {Object} obj2
+ * @return {Object} obj1
+ */
+module.exports = function(obj1, obj2) {
+    for (var key in obj2) {
+        if (obj1[key] === undefined) obj1[key] = obj2[key]
+    }
+    return obj1
+}
+
diff --git a/package.json b/package.json
index 8b55b9d0f..93e71c081 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jss",
   "description": "Composable and reusable style sheets.",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "author": {
     "name": "Oleg Slobodskoi",
     "email": "oleg008@gmail.com"
diff --git a/readme.md b/readme.md
index 359abc7f4..f9d27df15 100755
--- a/readme.md
+++ b/readme.md
@@ -15,22 +15,12 @@ Why do we need transpilers like [sass](http://sass-lang.com/) or [stylus](http:/
 
 Smaller footprint because of code reuse and no vendor specific declarations
 
-Take a look at [examples](http://jsstyles.github.io/jss/examples/index.html) directory.
+### Examples
 
-### Plugins
-
-Jss styles are just plain javascript objects. They map 1:1 to css rules, except of those modified by [plugins](https://github.com/jsstyles?query=jss-).
-
-Some of those plugins:
-
-- Nested rules is implemented through [jss-nested](https://github.com/jsstyles/jss-nested) plugin. Also you can do pseudo selectors like `:hover` via nested rules.
-- Use `extend` property to inherit from some plain rule object, via [jss-extend](https://github.com/jsstyles/jss-extend)
-- Vendor prefixes are automatically added through [jss-vendor-prefixer](https://github.com/jsstyles/jss-vendor-prefixer) plugin.
-- You can use camel cased css property names through [jss-camel-case](https://github.com/jsstyles/jss-camel-case) plugin.
-- Add 'px' automatically to non numeric values using [jss-px](https://github.com/jsstyles/jss-px)
+Working [examples](http://jsstyles.github.io/jss/examples/index.html) directory.
 
+#### Example with extend, nesting auto px
 ```javascript
-// Some random jss code example
 {
   carouselCaption: {
     extend: something,
@@ -41,12 +31,39 @@ Some of those plugins:
     }
   },
   hr: {
+    height: 1,
     border: 0,
     borderTop: '1px solid #eee'
   }
 }
 ```
 
+#### Example with @media
+```javascript
+{
+  button: {
+    width: 100
+  },
+  '@media (min-width: 1024px)': {
+    button: {
+      width: 200
+    }
+  }
+}
+```
+
+### Plugins
+
+Jss styles are just plain javascript objects. They map 1:1 to css rules, except of those modified by [plugins](https://github.com/jsstyles?query=jss-).
+
+Some of those plugins:
+
+- Nested rules is implemented through [jss-nested](https://github.com/jsstyles/jss-nested) plugin. Also you can do pseudo selectors like `:hover` via nested rules.
+- Use `extend` property to inherit from some plain rule object, via [jss-extend](https://github.com/jsstyles/jss-extend)
+- Vendor prefixes are automatically added through [jss-vendor-prefixer](https://github.com/jsstyles/jss-vendor-prefixer) plugin.
+- You can use camel cased css property names through [jss-camel-case](https://github.com/jsstyles/jss-camel-case) plugin.
+- Add 'px' automatically to non numeric values using [jss-px](https://github.com/jsstyles/jss-px)
+
 #### Order does matter! Here is the right one:
   - jss-nested
   - jss-extend
diff --git a/test/Rule.js b/test/Rule.js
index 736da59f5..4ae06f380 100755
--- a/test/Rule.js
+++ b/test/Rule.js
@@ -3,6 +3,7 @@
 QUnit.module('Rule')
 
 test('create empty instance', function () {
+    jss.uid.reset()
     var rule = jss.createRule()
     equal(rule.className, 'jss-0-0')
     equal(rule.selector, '.jss-0-0')
@@ -13,8 +14,10 @@ test('create empty instance', function () {
 })
 
 test('create instance with selector only', function () {
+    jss.uid.reset()
     var rule = jss.createRule('a')
-    equal(rule.selector, 'a')
+    equal(rule.selector, '.jss-0-0')
+    equal(rule.className, 'jss-0-0')
     deepEqual(rule.style, undefined)
 })
 
@@ -35,7 +38,7 @@ test('create instance with styles and options', function () {
 })
 
 test('create instance with all params', function () {
-    var options = {}
+    var options = {named: false}
     var rule = jss.createRule('a', {float: 'left'}, options)
     deepEqual(rule.style, {float: 'left'})
     equal(rule.className, undefined)
@@ -75,12 +78,12 @@ test('run plugins on inner rules of an at-rule', function () {
 })
 
 test('toString', function () {
-    var rule = jss.createRule('a', {float: 'left', width: '1px'})
+    var rule = jss.createRule('a', {float: 'left', width: '1px'}, {named: false})
     equal(rule.toString(), 'a {\n  float: left;\n  width: 1px;\n}')
 })
 
 test('multiple declarations with identical property names', function () {
-    var rule = jss.createRule('a', {display: ['inline', 'run-in']})
+    var rule = jss.createRule('a', {display: ['inline', 'run-in']}, {named: false})
     equal(rule.toString(), 'a {\n  display: inline;\n  display: run-in;\n}')
 })
 
diff --git a/test/StyleSheet.js b/test/StyleSheet.js
index cd26c0898..7d9614a53 100755
--- a/test/StyleSheet.js
+++ b/test/StyleSheet.js
@@ -27,7 +27,6 @@ test('create instance with rules and generated classes', function () {
     ok(ss.rules.a instanceof jss.Rule)
     equal(typeof ss.classes.a, 'string')
     ok(ss.options.named)
-    equal(ss.rules.a.options.name, 'a', 'name has been passed to the rule')
 })
 
 test('create instance with rules where selector is a global class', function () {
@@ -108,7 +107,6 @@ test('toString named', function () {
 })
 
 test('toString unnamed with media query', function () {
-    jss.uid.reset()
     var ss = jss.createStyleSheet({
         a: {color: 'red'},
         '@media (min-width: 1024px)': {a: {color: 'blue'}}
@@ -119,6 +117,20 @@ test('toString unnamed with media query', function () {
     ss.detach()
 })
 
+test('toString named with media query', function () {
+    jss.uid.reset()
+    var ss = jss.createStyleSheet({
+        a: {color: 'red'},
+        '@media (min-width: 1024px)': {
+            a: {color: 'blue'},
+            b: {color: 'white'}
+        }
+    })
+    ss.attach()
+    equal(ss.toString(), '.jss-0-0 {\n  color: red;\n}\n@media (min-width: 1024px) {\n  .jss-0-0 {\n    color: blue;\n  }\n  .jss-0-3 {\n    color: white;\n  }\n}')
+    ss.detach()
+})
+
 test('link', function () {
     var ss = jss.createStyleSheet({a: {float: 'left'}}, {link: true})
     ss.attach()
diff --git a/x-package.json5 b/x-package.json5
index dce518f54..3f955518a 100755
--- a/x-package.json5
+++ b/x-package.json5
@@ -1,7 +1,7 @@
 {
     name: 'jss',
     description: 'Composable and reusable style sheets.',
-    version: '2.1.6',
+    version: '2.2.0',
     author: {
         name: 'Oleg Slobodskoi',
         email: 'oleg008@gmail.com'