Adding and Removing Classes

Hi I was wondering about one thing,

Let say we have this situation

  1. I add a class let say Mouse with some parameters let say width: 2rem , and next
  2. I removed this class (Mouse)
  3. I again add this class with new change parameter let say width: 3rem;

I still have old class with my old settings 2rem !!! instead 3 rem, off course there is this a new class but stroke off in chrome developers tools

the way I add this class is
mySheet.sheet.insertRule(.Mouse {})
element.classList.add(‘Mouse’)

the way I remove this class is
mySheet.sheet.deleteRule(0);
element.classList.remove(“Mouse”);

Thanks

CSS is order dependent. If you’re adding a new rule to the top (0 index), and there is another matching rule later in the sheet, the last rule wins. Thus your new rule, having been overwritten, appears crossed through in dev tools.

For the sake of my curiosity, what circumstance has led you to modifying a stylesheet through javascript?

I know that, as I marked I removed this class and no class is shown after removing. Why it appears after adding it again ?, and besides 0 index is default (allowed values are between 0-1)

In the past I resolved this issue with the new name of the class and switching between two names of the same class (but with different values) and it worked, I simply want to find out why it appears again ??

ok, I resolved this issue and some obvious solution but not as clear as it should be :wink:

I simple for every class added different index 0.11 0.12 .01 and so on it doesn’t look goo as whole numbers, but it works perfectly.