// asynchronous self-invoking function to not pollute global namespace
(function(window, document, undefined) {
  var TAB_KEY_CODE = 9;
  var M_KEY_CODE = 77;

  var SOFT_TAB = '    ';
  var SOFT_TAB_LENGTH = SOFT_TAB.length;

  window.addEventListener('DOMContentLoaded', function(event) {
    var head = document.getElementsByTagName('head')[0];
    var body = document.body;

    var style = document.createElement('style');
    var textarea = document.createElement('textarea');

    // hide textarea by default
    textarea.style.display = 'none';
    textarea.id = 'my-style-input';

    head.appendChild(style);
    body.appendChild(textarea);

    style.innerHTML = localStorage.myStyle || '';
    textarea.value = style.innerHTML;

    // default help message
    if (textarea.value === '') {
      textarea.value = '/* Enter your styles here. */';
    }

    // continually update styles with textarea content
    textarea.addEventListener('keyup', function(event) {
      style.innerHTML = textarea.value;
      localStorage.myStyle = style.innerHTML;
    });

    // pressing tab should insert spaces instead of focusing another element
    textarea.addEventListener('keydown', function(event) {
      var value = textarea.value;
      var caret = textarea.selectionStart;

      // if tab is pressed, insert four spaces
      if (event.keyCode === TAB_KEY_CODE) {
        textarea.value = value.substring(0, caret) + SOFT_TAB +
          value.substring(caret);

        // move caret to after soft tab
        textarea.setSelectionRange(caret + SOFT_TAB_LENGTH, caret +
          SOFT_TAB_LENGTH);

        // prevent default tab action that shifts focus to the next element
        event.preventDefault();
      }
    });

    window.addEventListener('keydown', function(event) {
      // control + m toggles text area
      if (event.ctrlKey && event.keyCode === M_KEY_CODE) {
        if (textarea.style.display == 'none') {
          textarea.style.display = 'block';
        } else {
          textarea.style.display = 'none';
        }
      }
    });
  });
})(this, this.document);

// asynchronous self-invoking function to not pollute global namespace
(function(window, document, undefined) {
  var TAB_KEY_CODE = 9;
  var M_KEY_CODE = 77;

  var SOFT_TAB = '    ';
  var SOFT_TAB_LENGTH = SOFT_TAB.length;

  /* Throttle the given function, condensing multiple calls into one call after
   * the given timeout period. In other words, allow at most one call to go
   * through per timeout period. Returns the throttled function.
   *
   * Arguments:
   * fn -- the function to throttle
   * timeout -- the timeout to throttle for
   */
  function throttle(fn, timeout) {
    return function throttledFn() {
      if (!throttledFn.timer) {
        // keep track of the arguments to the function and the context
        var args = arguments;
        var that = this;

        // call the function after the provided timeout
        throttledFn.timer = setTimeout(function() {
          fn.apply(that, args);

          // finished calling the function; unset the timer
          throttledFn.timer = undefined;
        }, timeout);
      }
    };
  }

  window.addEventListener('DOMContentLoaded', function(event) {
    var head = document.getElementsByTagName('head')[0];
    var body = document.body;

    var style = document.createElement('style');
    var textarea = document.createElement('textarea');

    // hide textarea by default
    textarea.style.display = 'none';
    textarea.id = 'my-style-input';

    head.appendChild(style);
    body.appendChild(textarea);

    style.innerHTML = localStorage.myStyle || '';
    textarea.value = style.innerHTML;

    // default help message
    if (textarea.value === '') {
      textarea.value = '/* Enter your styles here. */';
    }

    var updateStyle = throttle(function() {
      style.innerHTML = textarea.value;
      localStorage.myStyle = style.innerHTML;
    }, 500);

    // continually update styles with textarea content
    textarea.addEventListener('keyup', updateStyle);
    textarea.addEventListener('change', updateStyle);

    // pressing tab should insert spaces instead of focusing another element
    textarea.addEventListener('keydown', function(event) {
      var value = textarea.value;
      var caret = textarea.selectionStart;

      // if tab is pressed, insert four spaces
      if (event.keyCode === TAB_KEY_CODE) {
        textarea.value = value.substring(0, caret) + SOFT_TAB +
          value.substring(caret);

        // move caret to after soft tab
        textarea.setSelectionRange(caret + SOFT_TAB_LENGTH, caret +
          SOFT_TAB_LENGTH);

        // prevent default tab action that shifts focus to the next element
        event.preventDefault();
      }
    });

    window.addEventListener('keydown', function(event) {
      // control + m toggles text area
      if (event.ctrlKey && event.keyCode === M_KEY_CODE) {
        if (textarea.style.display == 'none') {
          textarea.style.display = 'block';
        } else {
          textarea.style.display = 'none';
        }
      }
    });
  });
})(this, this.document);

Save CSS less frequently. Handle change event so copy-pasting saves CSS.