Building a light framework is this approach worth developing?

Question

I am thinking about creating a Javascript library that parses each node in the DOMs' class attribute and looks for a namespace, once it finds the name space it parses the values following it (_ delimited values written into the classname string)

Here is the demo: http://codepen.io/nicholasabrams/pen/rVwyQK

As you can see this particular proof of concept that it turns the classname padding_25px_25pct_25px_22px into ->

[elm]{
    padding-top: 25px;
    padding-right: 25%;
    padding-bottom: 25px;
    padding-left: 25px;
}

Here is the quick bit of JS code thrown together which could handle any similar structured DOM props but for simplicities sake, I left the method hard coded to deal with the padding property:

// Convention over configuration, dynamic style generator. Initialized and driven off of class name convention

(function inlineJs() {
  "use strict";
  var $paddingTarg = $('[class^="padding_"]');
  function replaceActionParseValues(action, subject){
    var res = subject.replace(action, '').replace('_', '').replace('pct', '%').split(/_/g); // % is invalid css selector value, so parse pct as the val and convert to a %
    return res;
  };
  $paddingTarg.each(function() {
    var dimsFullClass = $(this).attr('class');
    if (dimsFullClass.match('padding')) {
      var dims = replaceActionParseValues('padding', dimsFullClass)

      applyDims(dims.length);

      function applyDims(nDims) {

        switch (nDims) {

          case 1:
            $paddingTarg.css({
              'padding': dims[0]
            });
          break;

          case 2:
            $paddingTarg.css({
              'paddingTop': dims[0],
              'paddingRight': dims[1],
              'paddingBottom': dims[0],
              'paddingLeft': dims[1]
            });
          break;

          case 4:
            $paddingTarg.css({
              'paddingTop': dims[0],
              'paddingRight': dims[1],
              'paddingBottom': dims[2],
              'paddingLeft': dims[3]
            });
          break;

          default:
            throw new Error('Unknown param length sent to $.applyDims()');

        }
      }

    }
  });
})();

Is this approach right? Would these 'helpers' end up littering the DOM with the wrong type of naming amongst classes? To me it seems like this has all the speed of inline styling with all the shared code benefits of using a centralized not-inline stylesheet. I just want to be sure before I invest any dev time into making this into an open source utility.

Thanks to anyone who can lead me in the right direction on this, didn't know where to start, didn't see anything that was similar to this on SO.