Javascript 如何强制jQuery更改CSS值本身，而不是添加内联样式？

在开发自己的网格系统时，我决定使用jQuery，而不是为每个宽度或高度添加类。 我从中找到了下面的代码，用于根据div的类名使用jQuery更改div的宽度：

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

例如：

应该有一个

100/5+“%”=20%的宽度

问题是jQuery添加了内联css，而不是在类
（tul-5）
本身中更改width属性的值。
变为
。
我想要的是：

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

我想摆脱内联css，因为SEO和它造成的混乱

我尝试过的事情：

我尝试使用默认宽度大小创建类，但没有成功：

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

我还尝试了上面提到的页面中的纯Js代码，但它也添加了内联css

注：我还没有声明任何以
tul
开头的类，如果你正在开发自己的网格系统，你不需要javascript。这可以通过SASS或更少的SASS实现。看看它是如何在Bootstrap或materialui中实现的，sass和lessw中都有源文件，内联css与SEO有什么关系？你能分享完整的代码吗？可能是@lomboboo的重复我在考虑Javascript，因为我有很多语法相同的类（比如
bg-{color}
）自动生成它们会有很大帮助。根据您的建议，我检查了SASS和LESS，并找到了两种生成类的方法，因此我将使用SASS。非常感谢！