Reset/remove CSS styles for element only

Question

I\'m sure this must have been mentioned/asked before but have been searching for an age with no luck, my terminology must be wrong!

I vaguely remember a twee

Answer 1

There's a brand new solution found to this problem.

Use all: revert or all: unset.

From MDN:

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

You need "A css rule available that would remove any styles previously set in the stylesheet for a particular element."

So, if the element have a class name like remove-all-styles:

Eg:

HTML:

 
   
   
 My text 

With CSS:

  .remove-all-styles {
    all: revert;
  }

Will reset all styles applied by other-class, another-class and all other inherited and applied styles to that div.

Or in your case:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

Will do.

Here we used one cool CSS property with another cool CSS value.

1. revert

Actually revert, as the name says, reverts that property to its user or user-agent style.

2. all

And when we use revert with the all property, all CSS properties applied to that element will be reverted to user/user-agent styles.

Click here to know difference between author, user, user-agent styles.

For ex: if we want to isolate embedded widgets/components from the styles of the page that contains them, we could write:

.isolated-component {
 all: revert;
}

Which will reverts all author styles (ie developer CSS) to user styles (styles which a user of our website set - less likely scenario) or to user-agent styles itself if no user styles set.

More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

And only issue is the support: only Safari 9.1 and iOS Safari 9.3 have support for revert value at the time of writing.

So I'll say use this style and fallback to any other answers.