Replacing multiple ids with one class
If you have multiple ids all exhibiting the same behaviour, they should be refactored into one class. From there you can go on to further refactorings, but baby steps...
An example can be something such as:
As you can see, there's no need for these to be in id's at all, the writers just didn't know (or think).
To combat this, I suggest the following which has served me well (though it can have 1 undesirable (but rare) effect)
Find all single rule selectors
Find all the selectors with the same single rule (In this case we're targeting height: 25px
). In my case I used a very naive vim search pattern.
Group rules together
You then want to start consolidating these rules into one mega-rule. It looks terrible but it's a step in refactoring so relax.
Refactor to class
Rename the selector to something semantic and remove the old bunch of selectors.
Replace all old usages
At this point, you've refactored your many selectors into one and so you're ready to start refactoring the HTML and views that use it.
In some cases you don't want to remove all of the ids (javascript might be targeting it etc...). However, if it's just static HTML, then you should have no problem just doing a search and replace.
Remember to confirm with git add -p
!
Caveats
As mentioned before, the caveat is that you're moving styles into one place in the sheet. This means the selectors precedence has now changed and could potentially be overriding more or is being overridden itself.
You'll have to decide yourself if you want to take that risk (hint: I do).
Last updated
Was this helpful?