0

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.

Victor M Perez
  • 2,185
  • 3
  • 19
  • 22
Shahriar
  • 1,855
  • 2
  • 21
  • 45
  • 3
    If you're developing your own grid system you don't need javascript. This can be done with SASS or LESS. Look how it's implemented in Bootstrap or Material-UI, there are source files in sass and less – lomboboo May 06 '18 at 11:59
  • 1
    What does inline css have to do with SEO? – charlietfl May 06 '18 at 12:14
  • can you share complete code? – TAHA SULTAN TEMURI May 06 '18 at 15:14
  • 1
    Possible duplicate of [How modify a property of external CSS file using jQuery / Javascript](https://stackoverflow.com/questions/33784443/how-modify-a-property-of-external-css-file-using-jquery-javascript) – TAHA SULTAN TEMURI May 06 '18 at 15:16
  • @lomboboo I was thinking about Javascript because I have a lot of classes with same syntax (like `bg-{color}`) and generating them automatically helps a lot. Due to your recommendation, I checked both SASS and LESS and found ways in both to generate classes, so I'm going to use SASS. Many Thanks! – Shahriar May 07 '18 at 15:31
  • @charlietfl In some websites that analyze SEO, inline-css is considered a bad practice. After you said, I checked and it seems I was wrong (You're right.), however, it makes the file messy. – Shahriar May 07 '18 at 15:35
  • Nothing in the source file if you use script to modify inline style – charlietfl May 07 '18 at 18:06

0 Answers0