How to force jQuery to change CSS value itself, instead of adding inline styles?

Developing my own grid system, I decided to use jQuery instead of adding classes for every width or height. I found the code below from here to change the width of divs with jQuery, based on their classname:

$("[class*='tul-']").each(function(){
    $(this).css("width", 100 / $(this).attr("class").substring(4,5) + "%");
});

So, something like: <div class="tul-5"></div> should have a 100 / 5 + "%" = 20% width.

The problem is that jQuery adds inline-css instead of changing the value of width property in class (tul-5) itself. The <div class="tul-5"></div> becomes <div class="tul-5" style="width: 20%"></div>. What I want is:

tul-5 {
    width: 20%; /*change this*/
}

I want to get rid of inline-css because of SEO and the mess it makes.

Things I tried:

I tried creating classes with a default width size, but no luck:

.tul-1, .tul-2, .tul-3 {
    width: 50px;
}

I've also tried pure Js code from the page mentioned above, but it also adds inline-css.

P.S.: I haven't declared any classes starting with tul.