title: handling cssRules with javascript properly
body: <p>I am handling CSS rules using Javascript where on every resize event I create a class which might already be defined in CSS or by previous Javascript resize event, which leads to having too many CSS rules after some resize events. How do I change my code so that either I delete pre-existing CSS rules or modify them.</p>
  
  <p>here is my code that I found on StackOverflow.</p>
  
  <pre><code>var setStyleRule = function(selector, rule) {
      var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
      if(stylesheet.addRule) {
          stylesheet.addRule(selector, rule)
      } else if(stylesheet.insertRule) {
          stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
      }
  };
  </code></pre>