How to undo a CSS rule?

Question

Consider the following code:

.foo {color: blue;}    /* added by Sally */
.foo {color: green;}   /* added by Karen */
.foo {color: yellow;}  /* added by Chad */

<div class="foo">text</div>

In this case, word text will be rendered in yellow because it's the last iteration of the .foo class.

Is there any way to make CSS revert to previous definition of .foo and have the text be rendered in green (other than redefining .foo once again)?

P.S. I realize this is a contrived example, but that's the code base I am dealing with

You've defined `.foo ` 3 times already what's another override gonna hurt? Can you add another class? — zer00ne, Feb 08 '19 at 01:48
@zer00ne The problem I am dealing with is much bigger than this small example. I'd have to redefine a ton of stuff. — AngryHacker, Feb 08 '19 at 01:49
The question is very incomprehensible. First of all, it would not be bad to know why you need it, secondly, judging by the question, you probably need something else, which I don’t guess, and if I did, I would give more valuable advice. And thirdly, I advise you to describe the issue in more detail. — Air, Feb 08 '19 at 02:04
@Air I'd tell you more, but frankly what happened in this organization is so embarrassing from a software development standpoint that I'd rather not explain further. — AngryHacker, Feb 08 '19 at 02:06
I'm pretty sure there is no way to do this in CSS. There *might* be a way to do this using javascript. If javascript is ok, this might be helpful: https://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element — Cave Johnson, Feb 08 '19 at 02:09
Lol, sounds like a complicated situation but without more details no one can help. What can you actually edit in your code? CSS? HTML? JS? If you can't add another override like @zer00ne suggested, why not? There is no undo rule in CSS. — sallf, Feb 08 '19 at 02:11
@AngryHacker That confuses me with an incomprehensible question ... If I knew more, I would advise more, but since I do not understand anything, I will advise nothing ... I'm sorry — Air, Feb 08 '19 at 02:12
Let there be git. And there was [git](https://git-scm.com/). — tao, Feb 08 '19 at 02:13
Honestly I hope no one gives you a usable answer to this, that way you’ll have leverage to take to management when you ask to start using proper source control for your codebase — MTCoster, Feb 08 '19 at 02:15
@MTCoster I don't think there is a usable answer in CSS land. I'll just have to redefine those styles yet again. — AngryHacker, Feb 08 '19 at 02:23
@AndreiGheorghiu Karen wrote a bunch of styles. And things were good. People wrote code that used those styles. Then Chad came along and either didn't see those styles or was too incompetent and rewrote those same styles, placing them in a separate .css file and including them in the page on top of original styles. And then Chad wrote a ton of HTML that used those new styles and it went out to production. Now Jerry, working in his own sandbox and had Karen's styles, wrote a ton of HTML as well that work well with Karen's styles, but not Chads. That's the premise of my new Netflix show. — AngryHacker, Feb 08 '19 at 02:30
That's actually doable. If you can place Karen's styles into a separate file, you could load them last. Or to prefix Chad's code with a parent selector so it only applies to his markup. Whichever implies less effort. — tao, Feb 08 '19 at 02:36

score 2 · Answer 1 · answered Feb 08 '19 at 01:58

2

You can do a simple trick with duplicating class ))

.foo{
  color: blue;
}   

.foo.foo{
  color: green; 
} 

.foo {
  color: yellow;
}

<div class="foo">Text</>

answered Feb 08 '19 at 01:58

Hovhannes Sargsyan

1,063
14
25

1

It doesn't solve my problem, but have an upvote for creativity and making the person who maintains the code after me want to commit murder. – AngryHacker Feb 08 '19 at 02:02

tao · Accepted Answer · 2019-02-08T02:41:47.460

The problem you're trying to solve is not solvable without some (at least basic) way of versioning. Which is way out of CSS's scope.

A simple one would mean having an older backup (from before Chad joined the project).
A more modern one being git, where you can basically see and concatenate changes by line, by date, by author and combine them anyway you see git. I mean fit.

But if you don't have any way of reverting Chad's changes you can at least learn the lesson. Start your versioning system of choice now.
For example, you could make your changes in a separate file and load it last.

This solution comes with two major advantages:

order of changes can be changed by changing the file loading order
all changes made by one person are in only one file and when you're trying to undo parts of what that person did, you only need to look there

In order for this to work, you'd need to keep using selectors of same strength.

But, that's nothing compared to what git has to offer.
I should probably mention that, in case you do have older backups, git allows you to commit them separately and then gives you merging tools where you could see code side by side and decide which way you want to go. On a line-by-line basis.

The codebase is in git already. I can pull things out - that's not an issue. There is code in prod that relies on both versions. — AngryHacker, Feb 08 '19 at 02:43
Than it's quite easy. All you need is a capable IDE which can annotate. It shows you what and when was added. All you need to do is to separate one person's code and place it in a different stylesheet. At which point you can apply it last. But that doesn't mean Karen's styles won't affect Chad's. They **will**! The proper way to go here is to place wrappers on Chad's or Karen's modules and prefix their CSS with each module's selector. — tao, Feb 08 '19 at 02:46

score 0 · Answer 3 · answered Feb 08 '19 at 02:13

you are at the mercy of the cascade.

if you have access to the html and css then you could add an id #foo selector which will override class selectors.

or, god forbid, just make it !important

if you have a need to revert to yellow at some point then you will have to get a little more creative (i.e., JS).

score 0 · Answer 4 · answered Feb 08 '19 at 02:16

As an alternative rather than duplicating the class, you can add more specificity into the specific class which you meant it to be.

In the example it was the green color: .foo {color: green;} /* added by Karen */

Notice that .foo.bar class has more weight than a single .foo. While .foo class still work as intended.

.foo {color: blue;}    /* added by Sally */
.foo.bar {color: green;}   /* added by Karen */ /* then you add another class */
.foo {color: yellow;}  /* added by Chad */

<div class="foo bar">text</div>

score 0 · Answer 5 · answered Feb 08 '19 at 02:41

Let's get a handle on the CSS rule that we are trying to defeat:

When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. ref

So, rather than revert to the previous iteration of foo, Chad could just get more specific about his use of foo. For example:

.foo {color: blue;}    /* added by Sally */
.foo {color: green;}   /* added by Karen */

.foo[class="foo"] {color: yellow;}  /* added by Chad */

<div class="foo">text</div>
<div class="foo ">text</div>

How to undo a CSS rule?

5 Answers5