Remove inline styles and add in the site header

Want to display a clean code and without inline content?

Here's a fun way to remove the codes online and add all the site so header within the style tag, of course.

(function () {
 /*
 *
 * Variable definitions
 * 
 * @variables
 * a = Array (exit repeat loop)
 * c = Count (for new classes count)
 * e = Space (if there is already a class, add space)
 * h = Header (create a style based on the header "head")
 * n = New style (insert new style to the style base)
 * r = Random (creates a new class / id random)
 * s = Selectors (search all style selectors)
 * t = Inline text (inline text captures the style)
 *
 */

 var c, e, h, n, r, s, t;

 r = Math.random().toString(36).substring(14);

 s = document.querySelectorAll("*[style]");

 h = document.createElement('style');

 h.id = r;

 document.getElementsByTagName('head')[0].appendChild(h);

 c = 1;

 Array.prototype.forEach.call(s, function (a) {

 e = '';

 if (a.className !== '') {

 e = ' ';
 }

 a.className = a.className + e + r + '_' + c;

 t = a.style.cssText;

 n = document.getElementById(r);

 n.innerHTML = n.innerHTML + '.' + r + '_' + c + '{' + t + '}';

 a.style.cssText = '';

 c = c + 1;
 });

})();

Great! To view the operating, add this script in the header of your site and just let it work.

Related protips

Have a fresh tip? Share with Coderwall community!