diff --git a/src/css_composer/main.js b/src/css_composer/main.js
index 3d6099201..cf53350fd 100644
--- a/src/css_composer/main.js
+++ b/src/css_composer/main.js
@@ -18,7 +18,6 @@ define(function(require) {
         c[name] = def[name];
     }
 
-    //this.qset = { '' : CssRules, '340px': CssRules };
     var rules = new CssRules([]),
     rulesView = new CssRulesView({
       collection: rules,
@@ -64,50 +63,23 @@ define(function(require) {
 
         /**
          * Get class by its name
-         * @param {Array} selectors Array of selectors
-         * @param {String} state Rule status
-         * @param {String} set Query set
+         * @param   {Array} selectors Array of selectors
+         * @param   {String} state Css rule state
+         * @param   {String} width For which device this style is oriented
          *
          * @return  {Object|null}
          * */
-        getRule  : function(selectors, state, set) {
-          var req = _.pluck(selectors, 'cid');
-            fRule = null;
+        getRule  : function(selectors, state, width) {
+          fRule = null;
           rules.each(function(rule){
               if(fRule)
                 return;
-              var sel = _.pluck(rule.get('selectors').models, 'cid');
-              if(this.same(req, sel))
+              if(rule.compare(selectors, state, width))
                 fRule = rule;
           }, this);
           return fRule;
         },
 
-        /**
-         * Compare 2 arrays to check if are the same
-         * @param  {Array} arr1
-         * @param  {Array} arr2
-         *
-         * @return {Boolean}
-         */
-        same: function(a1, a2){
-          if(a1.length !== a2.length)
-            return;
-
-          for (var i = 0; i < a1.length; i++) {
-            var f = 0;
-
-            for (var j = 0; j < a2.length; j++) {
-              if (a1[i] === a2[j])
-                f = 1;
-            }
-
-            if(f === 0)
-              return;
-          }
-          return true;
-        },
-
         /**
          * Get collection of css rules
          *
diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js
index 169adfeb4..186b9dfcd 100644
--- a/src/css_composer/model/CssRule.js
+++ b/src/css_composer/model/CssRule.js
@@ -24,5 +24,43 @@ define(['backbone', './Selectors'],
                 this.set('selectors', new Selectors(this.slct));
             },
 
+            /**
+             * Compare the actual model with parameters
+             * @param   {Object} selectors Collection of selectors
+             * @param   {String} state Css rule state
+             * @param   {String} width For which device this style is oriented
+             *
+             * @return  {Boolean}
+             */
+            compare: function(selectors, state, width){
+                var st = state || '';
+                var wd = width || '';
+                var cId = 'cid';
+                var a1 = _.pluck(selectors.models || selectors, cId);
+                var a2 = _.pluck(this.get('selectors').models, cId);
+                var f = false;
+
+                if(a1.length !== a2.length)
+                    return f;
+
+                for (var i = 0; i < a1.length; i++) {
+                    var re = 0;
+                    for (var j = 0; j < a2.length; j++) {
+                        if (a1[i] === a2[j])
+                            re = 1;
+                    }
+                    if(re === 0)
+                      return f;
+                }
+
+                if(this.get('state') !== st)
+                    return f;
+
+                if(this.get('maxWidth') !== wd)
+                    return f;
+
+                return true;
+            },
+
     	});
 });
diff --git a/src/css_composer/view/CssRuleView.js b/src/css_composer/view/CssRuleView.js
index 32c7169ba..330ad5c13 100644
--- a/src/css_composer/view/CssRuleView.js
+++ b/src/css_composer/view/CssRuleView.js
@@ -15,6 +15,7 @@ define(['backbone'],
 
     /**
      * Returns string of selectors
+     *
      * @return {String}
      */
     renderSelectors: function(){
@@ -27,6 +28,7 @@ define(['backbone'],
 
     /**
      * Returns string of properties
+     *
      * @return {String}
      */
     renderProperties: function(){
@@ -38,9 +40,6 @@ define(['backbone'],
       return sel.join('');
     },
 
-    /*
-    http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
-     */
     render : function(){
       if(!this.selStr)
         this.selStr = this.renderSelectors();
diff --git a/test/specs/css_composer/main.js b/test/specs/css_composer/main.js
index 06a8c7e9b..f296bfd79 100644
--- a/test/specs/css_composer/main.js
+++ b/test/specs/css_composer/main.js
@@ -47,34 +47,85 @@ define([
 
 				it("Add rule to collection", function() {
 					var sel = new this.obj.Selectors([{name: 'test1'}]);
-					var rule = this.obj.newRule(sel.models, 'state1', 'width1');
+					var rule = this.obj.newRule(sel.models);
 					this.obj.addRule(rule);
 					this.obj.getRules().length.should.equal(1);
 					this.obj.getRules().at(0).get('selectors').at(0).get('name').should.equal('test1');
 				});
 
-/*
-				it("Don't duplicate rules", function() {
+				it("Returns correct rule with the same selector", function() {
+					var sel = new this.obj.Selectors([{name: 'test1'}]);
+					var rule1 = this.obj.newRule(sel.models);
+					this.obj.addRule(rule1);
+					var rule2 = this.obj.getRule(sel.models);
+					rule1.should.deep.equal(rule2);
+				});
+
+				it("Returns correct rule with the same selectors", function() {
 					var sel1 = new this.obj.Selectors([{name: 'test1'}]);
-					var rule1 = this.obj.newRule(sel1.models, 'state1', 'width1');
+					var rule1 = this.obj.newRule(sel1.models);
+					this.obj.addRule(rule1);
+
+					var sel2 = new this.obj.Selectors([{name: 'test21'}, {name: 'test22'}]);
+					var rule2 = this.obj.newRule(sel2.models);
+					this.obj.addRule(rule2);
+
+					var rule3 = this.obj.getRule(sel2.models);
+					rule3.should.deep.equal(rule2);
+				});
+
+				it("Don't duplicate rules", function() {
+					var sel = new this.obj.Selectors([]);
+					var s1 = sel.add({name: 'test1'});
+					var s2 = sel.add({name: 'test2'});
+					var s3 = sel.add({name: 'test3'});
+
+					var rule1 = this.obj.newRule([s1, s3]);
 					var aRule1 = this.obj.addRule(rule1);
 
-					var sel2 = new this.obj.Selectors([{name: 'test1'}]);
-					var rule2 = this.obj.newRule(sel2.models, 'state1', 'width1');
+					var rule2 = this.obj.newRule([s3, s1]);
 					var aRule2 = this.obj.addRule(rule2);
 
-					console.log(sel1);
-					console.log(rule1);
-					console.log(aRule1);
-					console.log(sel2);
-					console.log(rule2);
-					console.log(aRule2);
-					console.log(this.obj.getRules().length);
+					aRule2.should.deep.equal(aRule1);
+				});
+
+				it("Returns correct rule with the same mixed selectors", function() {
+					var sel = new this.obj.Selectors([]);
+					var s1 = sel.add({name: 'test1'});
+					var s2 = sel.add({name: 'test2'});
+					var s3 = sel.add({name: 'test3'});
+					var rule1 = this.obj.newRule([s1, s3]);
+					this.obj.addRule(rule1);
+
+					var rule2 = this.obj.getRule([s3, s1]);
+					rule2.should.deep.equal(rule1);
+				});
+
+				it("Returns correct rule with the same selectors and state", function() {
+					var sel = new this.obj.Selectors([]);
+					var s1 = sel.add({name: 'test1'});
+					var s2 = sel.add({name: 'test2'});
+					var s3 = sel.add({name: 'test3'});
+					var rule1 = this.obj.newRule([s1, s3], 'hover');
+					this.obj.addRule(rule1);
+
+					var rule2 = this.obj.getRule([s3, s1], 'hover');
+					rule2.should.deep.equal(rule1);
+				});
 
-					aRule1.should.deep.equal(aRule2);
+				it("Returns correct rule with the same selectors, state and width", function() {
+					var sel = new this.obj.Selectors([]);
+					var s1 = sel.add({name: 'test1'});
+					var rule1 = this.obj.newRule([s1], 'hover','1');
+					this.obj.addRule(rule1);
+
+					var rule2 = this.obj.getRule([s1], 'hover', '1');
+					rule2.should.deep.equal(rule1);
+				});
 
+				it("Renders correctly", function() {
+					this.obj.render().should.be.ok;
 				});
-*/
 
 			});
 
diff --git a/test/specs/css_composer/model/CssModels.js b/test/specs/css_composer/model/CssModels.js
index 4eb223da2..da0cd5c80 100644
--- a/test/specs/css_composer/model/CssModels.js
+++ b/test/specs/css_composer/model/CssModels.js
@@ -33,6 +33,30 @@ define([path + 'CssRule',
               this.obj.get('selectors').length.should.equal(0);
             });
 
+            it('Compare returns true with the same selectors', function() {
+              var s1 = this.obj.get('selectors').add({ name: 'test1' });
+              var s2 = this.obj.get('selectors').add({ name: 'test2' });
+              this.obj.compare([s1, s2]).should.equal(true);
+            });
+
+            it('Compare with different state', function() {
+              var s1 = this.obj.get('selectors').add({ name: 'test1' });
+              var s2 = this.obj.get('selectors').add({ name: 'test2' });
+              this.obj.set('state','hover');
+              this.obj.compare([s1, s2]).should.equal(false);
+              this.obj.compare([s1, s2], 'hover').should.equal(true);
+            });
+
+            it('Compare with different maxWidth', function() {
+              var s1 = this.obj.get('selectors').add({ name: 'test1' });
+              var s2 = this.obj.get('selectors').add({ name: 'test2' });
+              this.obj.set('state','hover');
+              this.obj.set('maxWidth','1000');
+              this.obj.compare([s1, s2]).should.equal(false);
+              this.obj.compare([s1, s2], 'hover').should.equal(false);
+              this.obj.compare([s2, s1], 'hover', '1000').should.equal(true);
+            });
+
         });
 
         describe('CssRules', function() {