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

I do not recommend using the answer that has been marked as correct here. It is a huge blob of CSS which tries to cover everything.

I would suggest that you evaluate how to remove the style from an element on a per case basis.

Lets say for SEO purposes you need to include an H1 on a page which has no actual heading in the design. You might want to make the nav link of that page an H1 but ofcourse you do not want that navigation link to display as a giant H1 on the page.

What you should do is wrap that element in an h1 tag and inspect it. See what CSS styles are being applied specifically to the h1 element.

Lets say I see the following styles applied to the element.

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Now you need to pin point the exact style which are applied to the H1 and unset them in a css class. This would look something like the following:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

This is much cleaner and does not just dump a random blob of code into your css which you don't know what it's actually doing.

Now you can add this class to your h1

<h1 class="no-style-h1">
     Title
</h1>

Answer 2

If you happen to be using sass in a build system, one way to do this that will work in all the major browsers is to wrap all your style imports with a :not() selector like so...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

Then you can use the disable class on a container and the sub-content won't have any of your styles.

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

Of course all your styles will now be prepended with the :not() selector, so it's a little fugly, but works well.

Answer 3

another ways:

1) include the css code(file) of Yahoo CSS reset and then put everything inside this DIV:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) or use

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

Answer 4

For future readers. I think this is what was meant but currently isn't really wide supported (see below):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• Supported in (source): Chrome 37, Firefox 27, IE 11, Opera 24
• Not supported: Safari

Answer 5

You mentioned mobile-first sites... For a responsive design, it's certainly possible to override small-screen styles with large-screen styles. But you might not need to.

Try this:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

Those media queries don't overlap, so their rules don't override each other. This makes it easier to maintain each set of styles separately.

Answer 6

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:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

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.