Which css style has least effect on an element?

Question

Today I was trying to create a dummy css rule for testing and investigation.

.dummy {
  some-style : somevalue;
}

Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example

<div class="dummy"> should look and behaves as much as possible like <div>

I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.

UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.

UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).

It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.

The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.

I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.

Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?

I thought I would ask here as there must be people who know CSS better than me.

Answer 1

UPDATE:

You can simply use a non-existing rule - it will be ignored by the browser => no effect.

.dummy{
    nothing: none;
}

---

OLD ANSWER:

You can use this:

.dummy{
    min-width: 0;
}

Answer 2

In principle, for any property you can have an arrangement like this:

div {
  some-style : a-valid-value-for-some-style;
}

.dummy {
  some-style : a-different-valid-value-for-some-style;
}

And .dummy's style will have an effect, no matter what some-style is.

Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so

.dummy {
   --dummy-style: foo;
}

will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.